Tag Selector for jQuery

Allows selecting multiple "Tags" by using jQuery UI's Autocomplete plugin with an interface similar to the one used by Facebook for sending a message to friends.

And this is how it looks like:

jQuery ×


In your page you need to include jQuery, jQuery UI CSS file, jQuery UI JavaScript file, the Tag Selector CSS file and the Tag Selector JavaScript file. In the following sample you can see how it looks:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css"
	rel=stylesheet type="text/css">
<link href="jquery-tagselector.css" rel=stylesheet>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script src="jquery-tagselector.js"></script>
<div id=tags class=tagSelector style="width:300px">
	<span class=tag>
		jQuery <a>×</a>
		<input name=tags type=hidden value=42>
	<input type=text>
$(function() {

	var tags = [
		{ id: 42, toString: function() { return 'jQuery'; } },
		{ id: 31, toString: function() { return 'Python'; } },
		{ id: 25, toString: function() { return 'HTML'; } },
		{ id: 83, toString: function() { return 'PHP'; } },
		{ id: 40, toString: function() { return 'ASP.NET MVC'; } },
		{ id: 25, toString: function() { return 'CSS'; } },
		{ id: 66, toString: function() { return 'JavaScript'; } },
		{ id: 87, toString: function() { return 'C#'; } },
		{ id: 28, toString: function() { return 'D'; } },
		{ id: 91, toString: function() { return 'Java'; } },
		{ id: 10, toString: function() { return 'Ruby'; } },
	$('#tags').tagSelector(tags, 'tags');


There's also a Django Form Widget that you can use with MultipleChoiceField and ModelMultipleChoiceField that will render the field apropiatelly and display already selected values. Just import TagSelectMultiple from the widgets.py file an use it like this:

from tagselector.widgets import TagSelectMultiple

class TagsForm(forms.ModelForm):
	tags = forms.ModelMultipleChoiceField(queryset=Tag.objects.all(),
		widget=TagSelectMultiple(attrs={ 'style': 'width:300px' }))


jQuery.tagSelector(source, name)

Initializes the tagSelector for the selected elements. They should have the appropiate structure (at least a div with an input field inside.

Parameter Type Description
source string/array/function The "source" property for jQuery UI's Autocomplete plugin.
name string Name of the hidden fields.


You may use any Tag Selector under the terms of either the MIT License or the GNU General Public License (GPL) Version 2.