jQuery Tags: Manejar un campo de tags con jQuery

Todos habrán visto la manera en que puedes agregar tags en los posts de WordPress, no? Escribes la tag, aprietas ENTER y la tag se agrega automáticamente a una lista debajo del campo de texto.

Este método es el más fácil y rápido para administrar una serie de tags, razón por la cual lo quise integrar en mi CMS. Aunque encontre varios scripts que cumplian con esta función, varios requerían de jQuery UI o directamente no me convencían, por lo que se me dio por crear mi propio plugin. Aquí les comparto el resultado.

Nota: Ademas de mis conocimientos limitados de javascript, el plugin se encuentra en desarrollo, por lo que podrían existir bugs.

Método de uso

Lo primero que debemos hacer, es insertar jQuery, el plugin y (si lo deseamos, ya que no es necesario) el CSS del plugin para darle un estilo copado:

<script src="js/jquery.js"></script>
<script src="js/jquery.tags.js"></script>
<link rel="stylesheet" media="screen" href="jquery.tags.css">

Luego, creamos el campo de texto que contendra las tags, por ejemplo:

<input type="text" id="tagmanager" name="tags" />

Y por último cargamos el plugin en el campo de texto:

jQuery(document).ready(function($){
    $('#tagmanager').tags();
});

Opciones disponibles

El plugin viene con 3 opciones disponibles, las cuales son:

separator - El separador de las tags, por defecto es una coma. (",")
tagAdded - Callback que se ejecutará al ser agregada una tag
tagRemoved - Callback que se ejecutará al ser eliminada una tag

Ejemplo de uso con las opciones:

jQuery(document).ready(function($){
    $('#tagmanager').tags({
        separator: '|',
        tagAdded: function(tag){ alert('Tag agregada: '+tag); }
    });
});

Links

Método de uso

Opciones disponibles