Facebook风格的JQuery自动完成插件

我的插件之后像Facebook那样做自动完成，你可以select多个项目 – 类似于如何标记一个计算器的问题。

这是我遇到的一对夫妇：

• http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete
• http://www.emposha.com/javascript/fcbkcomplete.html
• https://github.com/loopj/jquery-tokeninput

你有没有尝试过这些？ 他们容易实现和定制？

Answer 1

https://github.com/loopj/jquery-tokeninput

我只是在这一个去，这是很容易实现使用asp.net页面输出的JSON（从search参数）然后只需几行的Javascript你需要创build它（和设置）

 $(document).ready(function() { $("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", { hintText: "Begin typing the user name of the person you wish to assign.", noResultsText: "No results", searchingText: "Searching..." }); }); 

Answer 2

这个很好！ https://github.com/wuyuntao/jquery-autosuggest/

如何使用它

显然你需要确保你的页面已经加载了最新的jQuery库（至less1.3）。 之后，它非常简单，只需将下面的代码添加到您的页面中（确保将代码封装在jQuery的ready函数中）：

 $(function(){ $("input[type=text]").autoSuggest(data); }); 

以上代码行将AutoSuggest应用于页面上的所有文本typesinput元素。 每个人将使用相同的一组数据。 如果您希望网页上有多个使用不同数据集的AutoSuggest字段，请确保分开select它们。 喜欢这个：

 $(function(){ $("div.someClass input").autoSuggest(data); $("#someID input").autoSuggest(other_data); }); 

做以上将允许您通过不同的选项和不同的数据集。 下面是一个使用AutoSuggest与数据对象和其他各种选项的示例：

 var data = {items: [ {value: "21", name: "Mick Jagger"}, {value: "43", name: "Johnny Storm"}, {value: "46", name: "Richard Hatch"}, {value: "54", name: "Kelly Slater"}, {value: "55", name: "Rudy Hamilton"}, {value: "79", name: "Michael Jordan"} ]}; $("input[type=text]").autoSuggest(data.items, {selectedItemProp: "name", searchObjProps: "name"}); 

Answer 3

以下是我find的，没有特别的顺序：

• Selectize.js
• jQuery Tokeninput – GitHub
• select二
• TextboxList
• 标签 – GitHub
• TextExt
• FCBKcomplete – GitHub – 演示
• jQuery Facebook自动完成
• jquery-autosuggest – drewwilson演示
• 松树标签
• tagedit
• TAG-IT
• jQuery标签input
• 标签
• jquery.token场

Answer 4

这是JQueryUI集成之前的原始JQuery自动完成插件。 如果您只想提供JQuery而不是整个JQueryUI库，请使用这个。 我曾经使用过这个，并对此感到满意。

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete /

Answer 5

如果你正在寻找像fb和tw这样的用户提到function，这是很好的插件http://podio.github.io/jquery-mentions-input/

Answer 6

我发现了这一个。 看起来很健壮，维护得很好，反应迅速。

http://ivaynberg.github.io/select2/

Answer 7

我对devbridge autosuggest印象深刻。 高度可定制