Facebook 风格的 JQuery 自动完成插件

进出口插件做自动完成像 facebook 做的，你可以选择多个项目-类似如何标记堆栈溢出问题的工作。

下面是我遇到的一对夫妇:

你试过这些方法吗? 它们是否易于实现和定制？

86268 次浏览
小开
最佳答案

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..."
});
});
小开

这个非常好! https://github.com/wuyuntao/jquery-autosuggest/

如何使用

显然，您需要确保拥有最新的 jQuery 库(位于 至少1.3)已经加载到你的页面, 只需将以下代码添加到您的页面(确保包装您的代码 在 jQuery 的 ready 函数中) :

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

上面这行代码将对所有 input类型的文本应用自动建议 元素。每个元素将使用相同的数据集。如果 您希望页面上有多个使用 不同的数据集，请确保分别选择它们 这个:

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

执行以上操作将允许您传入不同的选项和 不同的数据集 数据对象和其他各种选项:

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"});
小开

这是原始的 JQuery 自动完成插件，在它被集成到 JQueryUI 之前。 如果希望只提供 JQuery，而不是整个 JQueryUI 库，请使用这个库。 我以前用过这个，并且对它很满意。

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

小开

我对 Devbridge的自动建议印象深刻。高度可定制

小开

以下是我的发现，顺序不分先后:

小开

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

小开

我找到了这个，看起来很强壮，保养良好，反应灵敏。

Http://ivaynberg.github.io/select2/


提交答案