Facebook风格的JQuery自动完成插件

Question

Facebook风格的JQuery自动完成插件

jqueryjquery-pluginsautocomplete

78

我需要一个类似 Facebook 的自动完成插件，可以选择多个项目 - 类似于标记 stackoverflow 问题的方式。

以下是我遇到的一些插件：

你试过这些中的任何一个吗？它们易于实现和自定义吗？

- Luke Lowrey

你用了哪个插件？我正在寻找一个在Firefox和IE中都能正常工作的插件。 - San

警告：我现在在我的项目中实现了JQuery-tokeninput，似乎不仅是它，这里提到的所有其他输入框都想把输入框放在单独的一行上。似乎不可能将它们放在同一行上，即“收件人：[..输入框..]”。也许绝对定位或使用表格是解决方案，但我真的不喜欢这两种方法，也许我错过了什么.. - Adrian Smith

JQuery-tokeninput现在具有Facebook风格，允许将多个标记放在同一行上。请查看演示。 - Druvision

7个回答

28

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

如何使用它

显然，您需要确保您的页面已经加载了最新的jQuery库（至少1.3）。之后非常简单，只需将以下代码添加到您的页面中（确保将代码包装在jQuery的ready函数中）：
$(function(){
    $("input[type=text]").autoSuggest(data);
});
上述代码将对页面上所有文本类型的input元素应用AutoSuggest。每个元素都将使用相同的数据集。如果您希望在页面上有多个使用不同数据集的AutoSuggest字段，请确保单独选择它们。像这样：
$(function(){
    $("div.someClass input").autoSuggest(data);
    $("#someID input").autoSuggest(other_data);
});
采用上述方法可以让您传入不同的选项和数据集。以下是使用Data Object及其他各种选项的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"});

- webcgo

1

这绝对是目前最好的自动建议插件。它不允许用户添加重复记录！ - atmorell

2

功能丰富，但是有很多的Bug。最终，我创建了自己的工具：http://the.deerchao.net/TagEditor - deerchao

@deerchao，你的工作非常非常好，我想知道是否可以将它与C#代码绑定？我的意思是标签，还有如何通过Web服务实现动态绑定，谢谢。 - user1074474

默认情况下，它仅支持从URL检索的JSON数据。但是，您可以使用所有源代码自定义它。 - deerchao

@ReynierPM 抱歉我在度假。你解决了问题吗？ - deerchao

显示剩余2条评论

22

以下是我发现的内容，没有特定的顺序：

- philfreo

不错的收藏，谢谢。 - Irfan DANISH

2

哪两个或三个是最好的？ - user

4

如果您正在寻找类似于fb和tw的用户提及功能，那么这是一个很好的插件http://podio.github.io/jquery-mentions-input/

- vikas devde

3

这是JQuery自动完成插件在被整合到JQueryUI之前的原始版本。如果您只想使用JQuery，而不想使用整个JQueryUI库，请使用此插件。我过去曾使用过这个插件，并对其感到满意。

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

- James Lawruk

1

我找到了这个。看起来很稳健，维护得很好，而且响应迅速。

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

- subeebot

0

我对devbridge的自动建议功能印象深刻。高度可定制化。

- andy boot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dkarzon · Accepted Answer

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

我刚试了一下，使用asp.net页面输出JSON数据（来自搜索参数）非常容易实现。然后只需要几行Javascript代码就可以创建它（以及设置参数）。

$(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..."
    });
});