531

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.

7
  • Voting to close as tool rec. May 30, 2016 at 17:10
  • 1
    I've created the best - github.com/yairEO/tagify
    – vsync
    Oct 13, 2016 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 Oct 13, 2016 at 22:07
  • @JoePhilllips - maybe it will accept google URL shortened ones
    – vsync
    Oct 13, 2016 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, 2016 at 22:55

6 Answers 6

777

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

Related:

22
  • On IE9 it is giving "Line: 18 Error: Object doesn't support property or method 'tagit'"
    – Raghav
    May 28, 2011 at 7:40
  • 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: github.com/aehlke/tag-it
    – Crisman
    Feb 21, 2012 at 21:15
  • 2
    update: I think magicsuggest is the best option now.
    – ssj
    Jan 8, 2016 at 3:28
  • 10
    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, 2016 at 22:55
  • 1
    @scniro I ended up using jquery.tagsinput 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 8, 2016 at 12:18
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.

4
  • 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 2, 2014 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, 2014 at 6:07
  • How to add new free tags with it: stackoverflow.com/questions/28656977/… Hard :-( May 31, 2016 at 10:22
  • Good one. Not supporting free-tagging is not a big issue, since it can be easily overcome. Aug 1, 2017 at 0: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.

4
  • 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 6, 2009 at 14:18
  • 27
    How is this the answer to the original question?
    – Derek
    Aug 22, 2011 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, 2011 at 10:47
  • @Derek I don't think I had any other acceptable answers when I originally asked it. That has since changed. Jan 8, 2012 at 3:12
5

Another excellent plugin can be found at https://documentcloud.github.io/visualsearch/

0
2

Check this plugin:

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

1
  • The demo page is dead here too
    – Fanky
    Oct 5, 2021 at 15:38
1

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

3
  • 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 for why it is important. Dec 5, 2012 at 21:43
  • 4
    The demo page is dead. Jul 28, 2014 at 18:55
  • Agree with @EdwardOlamisan. The demo page results in HTTP code 403.
    – SoJS
    Feb 11, 2021 at 17:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.