28 Dec

jQuery Tag Suggestion

If you're familiar with del.icio.us you will be familiar with the tag suggesting as-you-type support.

The reason why, I believe, the tagging works so well within del.icio.us is that it helps you create a subset of tags that you commonly use for different types of links. This way, it makes it easier to find tagged content later on. i.e. conversely if it didn't suggest links, it would be likely that you would have different variations or even spellings of the same tag on (what should be) grouped content.

So, in an effort to adopt this approach, I've created a jQuery plugin for tag suggestion.

Download jQuery tag suggestion

Download tag.js

The plugin has been tested with:

IE 7
Firefox 2
Safari 3
Opera 9

If anyone has any problems in any other browsers (or even these), I would appreciate the feedback.

Demonstration

View the tag suggestion demo

View the source for the demo

The demonstration shows off both the static based tags and the Ajax based tag suggestion. Although the tag sets are the same, be sure to open Firebug and check the Ajax hits in the second example.

Example code

Static example

Allows the input field to have their own set of tag suggestions.

$(function () {
  $('input.tagSuggest').tagSuggest({
    tags: ['javascript', 'js2', 'js', 'jquery', 'java']
  });
  $('#otherlanguages').tagSuggest({
    tags: ['applescript', 'php', 'perl', 'java']
  });
});

Static global example

setGlobalTags(['javascript', 'js2', 'js', 'jquery', 'java']);
$(function () {
  $('input.tagSuggest').tagSuggest();
});

Ajax example

$(function () {
  $('#tags').tagSuggest({
    url: '/tag-suggestion'
  });
});

Style

I would recommend the following styles for the suggested tags:

SPAN.tagMatches {
    margin-left: 10px;
}

SPAN.tagMatches SPAN {
    padding: 2px;
    margin-right: 4px;
    background-color: #0000AB;
    color: #fff;
    cursor: pointer;
}

Plugin parameters

All parameters are optional, so long as tags have been set via the setGlobalTags function.

delay - sets the delay between keyup and the request - can help throttle ajax requests, defaults to zero delay
matchClass - class applied to the suggestions, defaults to 'tagMatches'
separator - optional tag separator string, defaults to ' '
sort - boolean to force the sorted order of suggestions, defaults to false
tagContainer - the type of element uses to contain the suggestions, defaults to 'span'
tagWrap - the type of element the suggestions a wrapped in, defaults to 'span'
tags - array of tags specific to this instance of element matches, defaults to global tags
url - url to get suggestions, overrides any specifically set tags. Must return array of suggested tags as JSON

You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)

71 Responses to “jQuery Tag Suggestion”

Blog Author Remy Sharp February 27th, 2008 at 7:58 pm

@Brian - cheers. I'll patch that in at the same time I patch in the 'already selected filter' and the fix to the bug Leandro explained.

Thanks again.
Vineet Jain February 27th, 2008 at 8:36 pm

Is there any way to combine what you have with

http://www.alcoholwang.cn/jquery/jTaggingDemo.htm

to make a complete tagging solution.
Upgraded jQuery Tag Suggestions February 28th, 2008 at 1:43 am

[...] After lots of great feedback, I've upgraded the jQuery Tag Suggest Plugin. [...]
Blog Author Remy Sharp February 28th, 2008 at 1:44 am

Thanks for all the feedback.

I've upgraded the plugin to fix problems raised on this post (and on the jQuery plugins web site). Also included is the filtering request.

More details here

Usage hasn't changed.

Thanks for all the great feedback.
jQuery tag autocompleter: http://remysha … « Random Trap April 25th, 2008 at 5:14 pm

[...] pm on April 25, 2008 | # | Tags: autocompletion, jquery, tags jQuery tag autocompleter: http://remysharp.com/2007/12/28/jquery-tag-suggestion/ [...]
Raghu May 16th, 2008 at 4:02 am

It will be great if someone can help me.
My application is returning different json array then what tagging.php is returning..it is like below..
{"match":["Chicago","California","Calcutta"]}

tagging.php used in demo is returning..json array like below...
["Chicago","California","Calcutta"]

What changes should I make in tag.js to work with json array that my application is returning..

Thanks a lot..
Blog Author Remy Sharp May 16th, 2008 at 7:27 am

@Raghu - see highlighted line here - you should be be able to change the tag.js file to work with your structure:

http://codedumper.com/adefa#7
dragonwt June 18th, 2008 at 8:07 am

thank you,plugin is so great!
Zenphoto » Zenphoto plugins July 1st, 2008 at 7:44 pm

[...] Developed by Malte Müller (acrylian) and Stephen Billard (sbillard) - an adaption of Remy Sharp’s jQuery Tag Suggestion [...]
Mythica July 2nd, 2008 at 2:49 pm

One thing to note: the suggested tags are not updated when deleting characters using backspace (it is when using delete).
Ian Tearle July 4th, 2008 at 3:09 pm

Hey Remy,
Is it possible to have the tags in a list, and add a delete button on each of the selected tags, like Facebook has when sending an email to many people?

There is a prototype and mootools version, but I cannot find a jQuery plugin which can do this, your tags example is the closest I can find.

You would be very popular if you created that, I certainly would buy you a beer.
Hannes September 1st, 2008 at 11:58 am

Wow!!! Good job. Could I take some of yours triks to build my own site?
sai September 29th, 2008 at 1:01 pm

Hey! good plugin there. Found a problem in IE7. If we have to enter a word that is a substring of an already available suggestion, its not possible to do it. I.e if I have a word "boxer" in my suggestio n list, then I cannot enter "box" as my entry. On pressing tab it chooses boxer, and on trying to go to the next field using mouse, the cursor comes back to the suggest field.
Is there a way to fix this.. may be we can have an option to allow or disallow such suggestions?
Devich » Blog Archive » jQuery get tagName from jQuery object October 3rd, 2008 at 3:23 am

[...] jQuery Tag Suggestion [...]
28 Autocomplete Scripts « The Adventures of Amit Dua October 12th, 2008 at 7:01 am

[...] jQuery Tag Suggest [...]
Éber Freitas Dias October 30th, 2008 at 5:30 pm
This is a great plugin I made a small change to it, 'cause I was getting a looot of tags on the screen and that was turning ugly, so I've added the following code to the "showSuggestions" function:
```
matchesCount = matches.length;

if(settings.limit) {
  if(matches.length > settings.limit) {
    matchesCount = settings.limit;
  }
}

for (i = 0; i < matchesCount; i++) { ...
```
and then, you just need to setup a limit key on your object when calling the plugin and there you go Hope it's usefull to someone else...
Chris Jones December 11th, 2008 at 8:47 pm

This is an excellent plugin. I just wanted to extend my thanks.
Ola January 7th, 2009 at 2:46 pm

I really like this plugin. Allthough it would have been nice to be abble to navigate the suggestions with the keyboard. Anyone know if that is hard to do. I think my own Javascript/JQuery skills is a bit to limited.

Thanks anyway and i think i will use this instead of the autocomplete plugin because it looks much better. But keyboard navigation would be awsome
Alberto January 26th, 2009 at 8:41 am

do you know if there is any way to disabled the Internet Explorer suggestion list programatically? this is placed over my suggestion list.
Thanks
Dre February 16th, 2009 at 4:00 pm

Any thoughts on turning this into a full Wordpress plugin? You would hit a huge following by doing so.

Warmest,
Dre