Work
SubscribejQuery 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
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
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
Hello Remy, I must say that I really like this plugin.
But, I just open my firebug and every time I write a letter I get a 404 error and almost crash my firefox lol. I have not even tested the script locally but i think that must be a problem with the routes with wordpress.
Oh well, keep up the good work and thx for sharing this.
@Lino - my bad! I had the url pointing to the wrong place. Fixed now. Cheers!
This is great! I was just looking for autocomplete-scripts for jQuery and didn't find anything I liked. Your script comes very close to perfect
What I would like to add would be separating tags with different separators (like colons) and possibility to use arrow keys to navigate between available suggestions (and spacebar, tab or enter selects) á la YUI autocomplete. ( http://developer.yahoo.com/yui/autocomplete/ )
Anyway, good work, keep it up!
[...] jQuery Tag Suggestion If you’re familiar with del.icio.us you will be familiar with the tag suggesting as-you-type support. (tags: ajax del.icio.us javascript jquery plugin tag development km) [...]
[...] 2.0 Remy Sharp has recently posted an entry on his blog about del.icio.us style tag suggestion using jQuery. If you've used del.icio.us then you're [...]
[...] jQuery Tag Suggestion (tags: jquery) [...]
Wonderful!! Just that I need! thanks!
Good plugin, but it makes too many query ajax,
Add a new parameter "delay" for query AJAX
get it here
http://jcnevado.googlepages.com/tag.js
@Julio - thanks for the suggestion. I've added a delay flag, though a slightly different implementation than yours - I moved the setTimeout earlier on in the code.
I would suggest to anyone thinking about using the tag plugin, to try keep the delay as low as you can handle, giving a much as possible a sense of 'real-time' for the user.
Static example is ok. But ajax version does not work for me even when I use copy of your demo html file, jquery.js and tag.js. For testing purposes I use url to php file which has only one line: . But no suggested tags appear on typing. What I am doing wrong?
@minde66 - I've just made the source code to the demo page available here:
http://remysharp.com/downloads/tagging.php
It uses a simple array to match the tags, but it should give you a good idea of what's being delivered to the page.
Thanks Remy. My json array structure was wrong. Because I will use comma as tags separator instead of space, I will try to adjust your script, but it would be nice to have such parameter.
Hello,
First of all, i have to tell you that it is a great plugin. But i have noticed something. When i type the first letter of the word as a capital, it produces wrong results. For example. First word is "Outdoor", when i start to type the second word, it still sends "Outdoor" to the server. I am using IE7. It works perfectly with lowercase letters.
Hi there, is there anyway to remove the already choosed tags from the suggestion list? Or.... make the suggestion with another style, if I click... remove it?
Sry for bad english!
Nice plugin, btw!
@Leandro - short answer - not right now. However, it's good feedback, so when I've got a bit of spare time I'll make the changes. Check back in a week if that's cool?
Hi Remy, tks for your reply.
Good to hear that feature will be implemented.
Btw, i was playing with your plugin and i think i found a bug. With you demo, (in ajax mode), type "a", then click "agile", next type "C" (uppercase) then click "Cocoa".... now, type "a" again: "Cocoa" still there...
I don't think this is suppose to happen!
Hugs!
@Leandro - thanks for the detailed explanation of the bug. Another user mentioned it, but I couldn't replicate it - now I can - thanks!
I'll be working to sort that out too. Cheers.
If someone could help me, that would be awesome. I'm not able to get this to work with my array (as minde66 above). My array prints fine with a foreach and echo, but it's apparently not json_encode - ing correctly. The ajax version was working fine using the test list in your demo ($default_tags). So... if my array's fine and the script is working fine, it must be something with the JSON encoding. Any pointers? Here's my code (Wordpress). The second part is straight from your demo.
Remy, no problem...
I kind of "fixed" the bug removing the ".toLowerCase()" methods at lines 37 and 79.
I don't know if is the best way to do it. But is working now!
Hugs!
Nice work!
I found useful to include a separator parameter to support multi words tags. And use ', ' instead of ' ' to separate tags.
http://weblogs.manas.com.ar/bcardiff/wp-content/uploads/2008/02/tag-separatorparam.patch
Also I would probably implement a filter to remove already selected tags by user.
@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.
Is there any way to combine what you have with
http://www.alcoholwang.cn/jquery/jTaggingDemo.htm
to make a complete tagging solution.
[...] After lots of great feedback, I've upgraded the jQuery Tag Suggest Plugin. [...]
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.
[...] pm on April 25, 2008 | # | Tags: autocompletion, jquery, tags jQuery tag autocompleter: http://remysharp.com/2007/12/28/jquery-tag-suggestion/ [...]
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..
@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
thank you,plugin is so great!
[...] Developed by Malte Müller (acrylian) and Stephen Billard (sbillard) - an adaption of Remy Sharp’s jQuery Tag Suggestion [...]
One thing to note: the suggested tags are not updated when deleting characters using backspace (it is when using delete).
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.
Wow!!! Good job. Could I take some of yours triks to build my own site?
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?
[...] jQuery Tag Suggestion [...]
[...] jQuery Tag Suggest [...]
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:
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...
This is an excellent plugin. I just wanted to extend my thanks.
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
do you know if there is any way to disabled the Internet Explorer suggestion list programatically? this is placed over my suggestion list.
Thanks
Any thoughts on turning this into a full Wordpress plugin? You would hit a huge following by doing so.
Warmest,
Dre
Very nice plugin, i would suggest on the ajax one to store the results. For example when you just type the letter "a" it makes a call, then if you type a "p" it make another call for "ap", when really you could take the previous call an weed out all the non matching, that would lower the request. Not that it matter much but would help. Again great work.
Chris
Great plugin. My only wish is that it would allow for the characters you type appear anywhere in the word instead of just the beginning. For example, if a user types "vas" one of the suggestions should be "javascript"
Thanks for that awesome plugin. I'd suggest small feature: 'target' options which is id or jquery selector where suggested tags will appear, not directly after .
I'll do it for myself needs, but maybe someone else will find it useful.
Hi Remy,
is it possible to run this without using json ?
for example what change do i need to make to tag.js
if i want/need to display the matches like this :
echo implode(' ',$match);
instead of
echo json_encode($match);
tnx
sean
ps: your plugin is Great !
would anyone know how to do the above
problem is i cant upgrade to the version of php that allows the use of json!
tnx
Hi,
Your script is just what im looking for and works really well. Now Im trying to implement it into a joomla component and it is driving me crazy. I implement it in the part of template of a view but it just doesnt work. Any help is welcome.
(Sorry for my english :P)
Great Plugin, but wondering if there's a way to avoid losing the suggestion list when a space (between words) is entered in the input area. I've changed the separator to a comma. I'd like to type two word tags.
Hey there,
Just thought I'd drop a thank you note for this wonderful little piece of jQuery magic. With only a little bit of tweaking (on the PHP and MySQL side of things) I managed to get it working exactly the way that I was hoping for.
Thanks again!
I'm using a comma as my separator. Works great if i only use tags that are suggested by the plugin. However, if i click a few suggested tags and then type in a new tag, it breaks the plugin and no more sugegstions will show up after typing in a tag that has no matches. Any ideas?
Found the correction to fix the problem:
I added:
if (el.value.substring(el.value.length-1)==settings.separator) {
currentTags = el.value.split(settings.separator);
hideSuggestions();
}
in the showSuggestions() function, right below the line:
workingTags = el.value.split(settings.separator);As you can read on
http://wiki.pylonshq.com/display/pylonsfaq/Warnings , the way you pass the tag-information might make CSRF or other malice easier.
Thusly, it is recommended to pass the Information not in a JSONArray, but in a modified structure. E.g.:
tags = {"result": [(tag.name) for tag in tag_q]}(in python)With this change, all you have to do is change line 112 of your script from
matches = m;
to
matches = m.result;
While using Firefox/3.0.10 on Mac OS X I sometimes get the following 2 errors when selecting/clicking one of several suggestions (I used jquery 1.3.2). Your demo here on-line displays the same errors when f.e. typing 'ap' and clicking one of the suggestions.
Permission denied to get property XULElement.popupOpen
http://remysharp.com/js/jquery.js
Line 2039
Permission denied to set property XULElement.selectedIndex
http://remysharp.com/js/jquery.js
Line 2039
Were you aware of that? P.S. I made a usefull display-suggestions-in-element-with-this-id-not-right-next-to-input addition to your code which I will mail you later when our project is finished (and I finished the 'replace with jQuery version'-part on line 256).
---Cheers, André
I would recommend disabling autocompletion in Firefox, f.e. by adding this line right after one of the above examples:
$('#tagsuggest').attr('autocomplete', 'off');
Great Tutorial,
Question: Is it possible to define a target div where the tags appear? Right now the tags are shown at the right of the input field. How can I change this to specific div?
Hopefully somebody can help me with this...
Thx!
Hi Remy. Thanks for this plugin - just what I was after. I've made a couple of small changes that I wanted to share
Firstly, if the delimiter is not a space character, then it carries that when the spacebar is depressed, the list of tags is not reset. The change is as follows:
case 32: {
if(settings.separator === ' ') {
setSelection();
return true;
}
}
Secondly, to reduce the number of AJAX requests. I've added an option for a minimum character length before a search is made - this wold likely be set to 2 or 3 chars. The key gain is not perfroming s search on the 1st character.
if (currentTag.tag) {
if(currentTag.tag.length < settings.minLength) {return};
Thanks again
Howie
HI,
The plugin tested with Chinese character wasn't show anything,
look forward fix it ,thx
I've made some tweaks to my own copy of this code to a) retain and correct the case of tags (but still match case-insensitively) and also to allow use of the up/down arrow keys to select which tag gets inserted when tab or enter is pressed.
If you want to incorporate these changes, let me know and I'll mail them to you.