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)

72 Responses to “jQuery Tag Suggestion”

David Abrahams August 26th, 2009 at 12:58 am

Hi Remy thanks for creating this great plugin. I have used it in a ASP.NET MVC application I built. Where it returns the suggested tag list from an SQL database. I posted some learnings on my blog if anyone else is after the same kind of thing http://kmsystems.squarespace.com/journal/2009/8/26/jquery-tag-suggestion-in-aspnet-mvc.html
David Abrahams August 30th, 2009 at 9:22 am

Hi Remy, I have now added the source code and demo of a working ASP.NET MVC JQuery Tag Suggestion implementation, in case anyone would like to do something similar. The link is the same http://kmsystems.squarespace.com/journal/2009/8/26/jquery-tag-suggestion-in-aspnet-mvc.html
lisnatat September 1st, 2009 at 1:01 pm

The ajax request handling seems to by synchronous. As a consequence the input field is locked while the request is active. Especially if the backend is a bit slow or your user is a fast typer a few letters will get clipped.

Setting the delay paramter reduces this effect a bit, but an asynchronous solution would solve that.
Kevin September 1st, 2009 at 3:01 pm

I'm having trouble attaching the tagsuggest function to a dynamically id'd input. I am doing an ajax search that returns a bunch of id. then i create several input fields with those ids and i need each one to have the tagsuggest functionality.

Any suggestions? Im sorry if this is a pretty dumb question. Any ideas?
Scott Kingsley Clark October 24th, 2009 at 12:27 am

It definitely is locking up the text field while ajax does all the communicating. Remy, any chance you'll be addressing this issue in a future release?
Scott Kingsley Clark October 24th, 2009 at 12:41 am

I just plugged in a couple of changes (not really all that fancy, just really simple stuff) to make it asynchronous:

1. Where the $.ajax call is, set "async" to true

2. Copy everything inside the brackets containing the $.ajax but outside and after the if(settings.url) and the else statement. Copy that code and move it into the success function of the AJAX as well as after the "for" statement in the else statement (non-ajax).
KB October 29th, 2009 at 6:03 pm

Is there anyway to simply check if a tag already exists, rather than find suggestions?

This would be used when submitting the tags.
krike November 30th, 2009 at 8:10 pm

It used to work now for some reason the error console says:

Error: $("#tags").tagSuggest is not a function
Source File: http://localhost/cmstut/submit_tutorial
Line: 526

I copy paste the javascript from the demo and I'm sure the link to the tag javascript file is set correctly
Shawn December 12th, 2009 at 12:03 am

I can confirm both Scott's problem with firefox 3.5.5 (on OS X anyways) as well as his solution (thank you!). I was not having the problem in other browsers and I don't think I used to have the problem in firefox. Not sure if it is new to firefox or perhaps new to a more recent jquery version since last testing (for me).
Chris December 15th, 2009 at 4:28 pm

Can we use your JQuery Tag Suggestion on commercial websites?

I have a task management system (to be used internally in the company) that I am working on, and this would work well for the tagging system.

Thanks,
Chris
stephen December 15th, 2009 at 7:11 pm

I need a way to "post process" the tag selection. My application needs tags which contain special characters (e.g. space) to be quoted in the post submission. But if I quote these in the golbal tag list, the user must type the quote to get the match. Most would not even think of doing this. So I would like to post process the selection to check for these characters and add the containing quotes to what is inserted into the field.
paul June 8th, 2010 at 1:44 am

For those of you who want to use commas as the delimiter:

Leave the default delimiter as a space. Then around line 168 of tag.js, change:
if (index == workingTags.length - 1) tag = tag + settings.separator;

with:
if (index == workingTags.length - 1) tag = tag + "," + settings.separator;

What that does is trigger the auto-suggest when the user puts in a space after the comma, and then when they select the word or hit enter, it puts the word plus the comma plus a space, and you're ready to start typing again. Its the best solution I've found and is working great.