527

What solutions accomplish the same auto-completion that SO uses for entering tags?

There are plugins that can handle one word but I haven't seen any that handle multiple words.

Joe Phillips
  • 44,686
  • 25
  • 93
  • 148
  • Voting to close as tool rec. – Ciro Santilli新疆棉花TRUMP BAN BAD May 30 '16 at 17:10
  • 1
    I've created the best - https://github.com/yairEO/tagify – vsync Oct 13 '16 at 22:00
  • @vsync Added it to the list in the first answer. Unfortunately can't link directly to codepen.io due to not having any code in the answer – Joe Phillips Oct 13 '16 at 22:07
  • @JoePhilllips - maybe it will accept google URL shortened ones – vsync Oct 13 '16 at 22:51
  • @JoePhilllips - My plugin is better than the best one on the top of the list, and deserves to be on the top and I have good selling points for that. currently the top one on the list is bloated (x4 than mine), uses extra input element (bad for form serialization) and does not support commas or pasting tags with them. it does offer some features which are nice but unneeded for most cases. `autocomplete` should be used desperately IMHO – vsync Oct 13 '16 at 22:55
  • @vsync welp, yours only has a few days under its belt. I reorganized the list a bit to honor the ones that are still available, recently updated, focused, and mentioned. Yours made it to #4 – Joe Phillips Oct 14 '16 at 02:59
  • What an honor :) it's not wine you know, in code usually the newer the better. A person won't bother coding a newer version of something unless it is better and the code has learned from the mistakes of the older ones and tried to out-smart them :) – vsync Oct 14 '16 at 10:14

6 Answers6

772

In order of activity, demos/examples available, and simplicity:

Related:

Blair Anderson
  • 17,040
  • 7
  • 64
  • 96
Dmitriy Nesteryuk
  • 8,237
  • 1
  • 15
  • 14
  • On IE9 it is giving "Line: 18 Error: Object doesn't support property or method 'tagit'" – Raghav May 28 '11 at 07:40
  • @raghav-khunger on IE the keyword "const" is not supported for javascript, hense the error. Check this out [link](http://stackoverflow.com/questions/130396/are-there-constants-in-javascript) – cleftheris Nov 24 '11 at 14:08
  • 2
    Anyone looking for the most up to date version, documentation and more extensive examples of this amazing plugin should go here and fork away: https://github.com/aehlke/tag-it – Crisman Feb 21 '12 at 21:15
  • We just released Bootstrap Tokenfield. It's main focus is on copy-paste, keyboard and editability support. http://sliptree.github.io/bootstrap-tokenfield/ – ragulka Jul 29 '13 at 14:48
  • Anyone who can recommend a good one with knockout.JS? – Asle G Jan 14 '14 at 14:30
  • Here's another good one: http://brianreavis.github.io/selectize.js/ I'd add it as an answer, but that would clearly be "unconstructive". – nonrectangular Sep 19 '14 at 09:58
  • Tag-it is very good for jquery autocomplete integration. – Lauris Kuznecovs Dec 02 '14 at 09:50
  • selectize.js 6500+ stars at github. worth checking. https://brianreavis.github.io/selectize.js/ – Denis Aug 24 '15 at 09:20
  • I am looking for one with autocomplete function and we can disable duplicate check, which one is good? Some of them always have duplicate check but it is not possible to disable this function. – phuwin Nov 06 '15 at 15:24
  • 1
    update: I think magicsuggest is the best option now. – ssj Jan 08 '16 at 03:28
  • Your second others link is broken. – Cullub Jan 29 '16 at 14:55
  • @Felipe Schenone **Tag-It** is good , but i have a problem when i want to post the selected tags `ID` using a form, users are facing same issue [here](http://stackoverflow.com/questions/9997450/jquery-tag-it-using-a-value-and-label-object-list), i want to set tag id's in hidden field and use it later during post, any good solution or other plugin ? – Shaiju T Feb 02 '16 at 13:05
  • 8
    tag-it is overrated. Requiring jquery for a simple tag system is too much, but requiring as well jQuery UI and jquery UI CSS is just mad nowadays. Not worth it. – Alvaro Apr 24 '16 at 22:55
  • @Alvaro totally agree, so mad about the deps will absolutely not use tag-it. Were you able to find a similar one in vanilla? – scniro Jun 08 '16 at 12:11
  • 1
    @scniro I ended up using [jquery.tagsinput](https://github.com/xoxco/jQuery-Tags-Input) because I do not mind using jQuery which is already being used in my project. I just though it was mad to ask for jquery UI and CSS. – Alvaro Jun 08 '16 at 12:18
  • Tag-It has issues, especially when changing read-write access (dynamically, client-side). – gouderadrian Aug 30 '16 at 06:19
  • Fore some reason I am not allowed using jQuery, is there any solution just css/js? – Singagirl Oct 27 '16 at 00:23
  • *Select2* Was a much better option for me. Try it before tag-it – Mark Nov 02 '16 at 17:48
  • how about this library https://github.com/sniperwolf/taggingJS ? Is it better than above mentioned libraries? – Vikas Sharma Jan 17 '17 at 11:37
  • I quite like tagify. It seems to be the most lightweight and easiest to configure. Only thing I don't like about it is the strange markup. – Swen Oct 20 '17 at 14:50
  • None of them worked for me. I am looking a tag feature like an input textbox and all the selected tags should be displayed below the input textbox, Not inside the textbox. If you have any solution, kindly share with me. Thanks. – Kamlesh Jan 03 '20 at 14:05
63

Bootstrap: If you are using Bootstrap. This is a really good one: Select2

Also, TokenInput is an interesting one. First, it does not depend on jQuery-UI, second its config is very smooth.

The only issue I had it does not support free-tagging natively. So, I have to return the query-string back to client as a part of response JSON.

As @culithay mentioned in the comment, TokenInput supports a lot of features to customize. And highlight of some feature that the others don't have:

  • tokenLimit: The maximum number of results allowed to be selected by the user. Use null to allow unlimited selections
  • minChars: The minimum number of characters the user must enter before a search is performed.
  • queryParam: The name of the query param which you expect to contain the search term on the server-side

Thanks culithay for the input.

Nishant
  • 49,257
  • 12
  • 102
  • 116
  • 3
    TokenInput looks like it's exactly what I've been looking for: user types some stuff in, performs a search on the server, user can select a searched for element, rinse and repeat. – Mala Oct 02 '14 at 17:02
  • 1
    TokenInput supports a lot of features to customize. And I highlight some feature that the others don't have. - tokenLimit: The maximum number of results allowed to be selected by the user. Use null to allow unlimited selections - minChars: The minimum number of characters the user must enter before a search is performed. - queryParam: The name of the query param which you expect to contain the search term on the server-side – culithay Oct 22 '14 at 06:07
  • 1
    @culithay added to the answer – Nishant Oct 22 '14 at 06:41
  • How to add new free tags with it: http://stackoverflow.com/questions/28656977/select2-event-for-creating-a-new-tag Hard :-( – Ciro Santilli新疆棉花TRUMP BAN BAD May 31 '16 at 10:22
  • Good one. Not supporting free-tagging is not a big issue, since it can be easily overcome. – RationalRabbit Aug 01 '17 at 00:37
8

This originally answered a supplemental question about the wisdom of downloading jQuery versus accessing it via a CDN, which is no longer present...

To answer the thing about Google. I have moved over to accessing JQuery and most other of these sorts of libraries via the corresponding CDN in my sites.

As more people do this means that it's more likely to be cached on user's machines, so my vote goes for good idea.

In the five years since I first offered this, it has become common wisdom.

Julian
  • 1,951
  • 14
  • 18
  • 3
    We roll this out as part of our default templates as well. Google can serve this code zipped and out of a CDN faster than us, plus if there's even a 2% chance that a visitor has this cached it's better than no chance at all. – Tom Feb 06 '09 at 14:18
  • 27
    How is this the answer to the original question? – Derek Aug 22 '11 at 13:17
  • 3
    The last part 'Also,...' asks whether linking to the Google version is a good or bad idea, and my answer is that it is an increasingly good idea. – Julian Aug 24 '11 at 10:47
  • @Derek I don't think I had any other acceptable answers when I originally asked it. That has since changed. – Joe Phillips Jan 08 '12 at 03:12
5

Another excellent plugin: http://documentcloud.github.com/visualsearch/

Mrchief
  • 70,643
  • 19
  • 134
  • 181
3

Check this plugin:

How to use AJAX for loading the tags https://stackoverflow.com/a/7662534/1078027

sg7
  • 5,365
  • 1
  • 30
  • 39
boreq
  • 620
  • 9
  • 17
1

We just open-sourced this jquery plug-in Github: tactivos/jquery-sew.

sg7
  • 5,365
  • 1
  • 30
  • 39
user1880508
  • 97
  • 1
  • 2
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid (and downvoted) if the linked page changes. See [How To Answer](http://stackoverflow.com/questions/how-to-answer) for why it is important. – bytebuster Dec 05 '12 at 21:43
  • 4
    The demo page is dead. – Edward Olamisan Jul 28 '14 at 18:55
  • Agree with @EdwardOlamisan. The demo page results in HTTP code 403. – So Js Feb 11 '21 at 17:37