jQuery autocomplete tagging plug-in like StackOverflow's input tags?
JqueryAutocompleteTagsJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
In order of activity, demos/examples available, and simplicity:
- (demo) https://github.com/yairEO/tagify
- (demo) https://github.com/aehlke/tag-it
- (demo) https://ioncache.github.io/Tag-Handler/
- (demo) http://textextjs.com/
- (demo) https://github.com/webworka/Tagedit
- (demo) https://github.com/documentcloud/visualsearch/
- (demo) http://harvesthq.github.io/chosen/ (this isn't really a tagging plugin)
- (demo?) http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
- (demo?) http://jcesar.artelogico.com/jquery-tagselector/
- (demo?) http://remysharp.com/wp-content/uploads/2007/12/tagging.php
- (demo?) http://pietschsoft.com/post/2011/09/09/Tag-Editor-Field-using-jQuery-similar-to-StackOverflow.aspx
Related:
Solution 2 - Jquery
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.
Solution 3 - Jquery
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.
Solution 4 - Jquery
Another excellent plugin can be found at https://documentcloud.github.io/visualsearch/
Solution 5 - Jquery
Check this plugin:
How to use AJAX for loading the tags https://stackoverflow.com/a/7662534/1078027
Solution 6 - Jquery
We just open-sourced this jquery plug-in Github: tactivos/jquery-sew.