jQuery 自动完成标记插件类似于 StackOverflow 的输入标记？ [关闭]答案

【问题标题】：jQuery autocomplete tagging plug-in like StackOverflow's input tags? [closed]jQuery 自动完成标记插件类似于 StackOverflow 的输入标记？ [关闭]
【发布时间】：2010-10-05 20:50:54
【问题描述】：

什么解决方案可以实现与 SO 用于输入标签相同的自动完成功能？

有插件可以处理一个词，但我还没有看到任何插件可以处理多个词。

【问题讨论】：

投票结束作为工具记录
我创造了最好的 - github.com/yairEO/tagify
@vsync 将其添加到第一个答案的列表中。不幸的是，由于答案中没有任何代码，无法直接链接到 codepen.io
@JoePhilllips - 也许它会接受谷歌 URL 缩短的
@JoePhilllips - 我的插件比列表中最好的插件要好，并且应该排在首位，我对此有很好的卖点。目前列表中的第一个是臃肿的（比我的 x4），使用额外的输入元素（对表单序列化不利）并且不支持逗号或粘贴标签。它确实提供了一些很好但在大多数情况下不需要的功能。 autocomplete 应该拼命使用恕我直言

标签： jquery autocomplete tags

【解决方案1】：

按照活动、可用演示/示例和简单性的顺序：

(demo)https://github.com/yairEO/tagify
(demo)https://github.com/aehlke/tag-it
(demo)http://ioncache.github.com/Tag-Handler/
(demo)http://textextjs.com/
(demo)https://github.com/webworka/Tagedit
(demo)https://github.com/documentcloud/visualsearch/
(demo) http://harvesthq.github.io/chosen/（这不是真正的标签插件）
（演示？）http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
（演示？）http://jcesar.artelogico.com/jquery-tagselector/
（演示？）http://remysharp.com/wp-content/uploads/2007/12/tagging.php
（演示？）http://pietschsoft.com/post/2011/09/09/Tag-Editor-Field-using-jQuery-similar-to-StackOverflow.aspx

相关：

https://meta.stackexchange.com/questions/100669/feedback-wanted-improved-tag-editor

【讨论】：

在 IE9 上给出“Line: 18 Error: Object does not support property or method 'tagit'”
任何正在寻找这个惊人插件的最新版本、文档和更广泛示例的人都应该去这里并分叉：github.com/aehlke/tag-it
更新：我认为现在magicsuggest是最好的选择。
tag-它被高估了。为一个简单的标签系统要求 jquery 太多了，但现在要求 jQuery UI 和 jquery UI CSS 简直是疯了。不值得。
@scniro 我最终使用了jquery.tagsinput，因为我不介意使用已经在我的项目中使用的 jQuery。我只是虽然很疯狂地要求 jquery UI 和 CSS。

【解决方案2】：

Bootstrap：如果您使用的是 Bootstrap。这是一个非常好的：Select2

另外，TokenInput 是一个有趣的。一是不依赖jQuery-UI，二是配置非常流畅。

我遇到的唯一问题是本机不支持免费标记。因此，我必须将查询字符串作为响应 JSON 的一部分返回给客户端。

正如@culithay 在评论中提到的，TokenInput 支持很多功能来定制。并强调其他人没有的一些功能：

tokenLimit：允许用户选择的最大结果数。使用 null 允许无限选择
minChars：执行搜索前用户必须输入的最少字符数。
queryParam：您希望在服务器端包含搜索词的查询参数的名称

感谢 culithay 的输入。

【讨论】：

TokenInput 看起来正是我一直在寻找的东西：用户输入一些内容，在服务器上执行搜索，用户可以选择搜索的元素，冲洗并重复。
TokenInput 支持很多功能自定义。我强调了一些其他人没有的功能。 - tokenLimit：允许用户选择的最大结果数。使用 null 以允许无限制的选择 - minChars：在执行搜索之前用户必须输入的最少字符数。 - queryParam：您希望在服务器端包含搜索词的查询参数的名称
@culithay 添加到答案中
如何添加新的免费标签：stackoverflow.com/questions/28656977/… Hard :-(
好一个。不支持免费标记不是什么大问题，因为它很容易克服。

【解决方案3】：

这最初回答了一个关于下载 jQuery 与通过不再存在的 CDN 访问它的智慧的补充问题...

回答有关 Google 的问题。我已经转而通过我网站中相应的 CDN 访问 JQuery 和大多数其他此类库。

随着越来越多的人这样做，这意味着它更有可能被缓存在用户的机器上，所以我的投票赞成好主意。

自从我第一次提出这个问题以来的五年里，它已成为普遍的智慧。

【讨论】：

我们也将其作为默认模板的一部分推出。 Google 可以比我们更快地从 CDN 中压缩并提供此代码，而且如果访问者有 2% 的机会缓存此代码，总比没有机会好。
原始问题的答案如何？
最后一部分 'Also,...' 询问链接到 Google 版本是个好主意还是坏主意，我的回答是这是一个越来越好的主意。
@Derek 我不认为我有任何其他可接受的答案，当我最初问它时。这已经改变了。

【解决方案4】：

另一个优秀的插件可以在https://documentcloud.github.io/visualsearch/找到

【讨论】：

【解决方案5】：

检查这个插件：

如何使用AJAX加载标签https://stackoverflow.com/a/7662534/1078027

【讨论】：

演示页面在这里也死了

【解决方案6】：

我们刚刚开源了这个jquery插件Github: tactivos/jquery-sew。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会变得无效（并且被否决）。请参阅 How To Answer 了解为什么它很重要。
演示页面已死。
同意@EdwardOlamisan。演示页面生成 HTTP 代码 403。