Facebook 风格的 JQuery 自动完成插件

Facebook style JQuery autocomplete plugin

提问by Luke Lowrey

Im after a plugin to do autocomplete like facebook does in that you can select multiple items - similar to how tagging a stackoverflow question works.

我在一个插件之后像 facebook 那样做自动完成，因为你可以选择多个项目 - 类似于标记 stackoverflow 问题的工作方式。

Here are a couple I ran into:

这是我遇到的几个：

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

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

Have you tried any of these? Were they easy to implement and customize?

你试过这些吗？它们是否易于实施和定制？

回答by dkarzon

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

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

I just had a go at this one and it was really easy to implement using an asp.net page to output the JSON (from the search params) Then theres just a few lines of Javascript you need to create it (and the settings)

我刚刚尝试了这个，使用 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..."
    });
});

回答by webcgo

This one very good! https://github.com/wuyuntao/jquery-autosuggest/

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

How To Use It

Obviously you need to make sure you have the latest jQuery library (at least 1.3) already loaded in your page. After that it's really simple, just add the following code to your page (make sure to wrap your code in jQuery's ready function):

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

The above line of code will apply AutoSuggest to all text type inputelements on the page. Each one will be using the same set of Data. If you want to have multiple AutoSuggest fields on your page that use different sets of Data, make sure you select them separately. Like this:

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

Doing the above will allow you to pass in different options and different Data sets. Below is an example of using AutoSuggest with a Data Object and other various options:

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 库（至少 1.3）。之后真的很简单，只需将以下代码添加到您的页面（确保将您的代码包装在 jQuery 的就绪函数中）：

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

上述代码行将 AutoSuggest 应用于input页面上的所有文本类型元素。每个人都将使用相同的一组数据。如果您希望页面上有多个使用不同数据集的 AutoSuggest 字段，请确保分别选择它们。像这样：

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

回答by philfreo

Here's what I've found, in no particular order:

这是我发现的，没有特定的顺序：

• Selectize.js
• jQuery Tokeninput-- GitHub
• Select2
• TextboxList
• Tag-it-- GitHub
• TextExt
• FCBKcomplete-- GitHub-- demo
• jQuery Facebook Autocomplete
• jquery-autosuggest-- drewwilson demo
• Pines Tags
• tagedit
• Tagit
• jQuery Tags Input
• Tags
• jquery.token-field

• 选择.js
• jQuery 令牌输入-- GitHub
• 选择2
• 文本框列表
• 标记它-- GitHub
• 文本扩展
• FCBKcomplete-- GitHub--演示
• jQuery Facebook 自动完成
• jQuery的自动提示- drewwilson演示
• 松树标签
• 标签编辑
• 塔吉特
• jQuery 标签输入
• 标签
• jquery.token 字段

回答by vikas devde

if you are looking for user mentions feature like fb and tw, this is good plugin http://podio.github.io/jquery-mentions-input/

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

回答by James Lawruk

This is the original JQuery autocomplete plugin before it was integrated into JQueryUI. If you are looking to serve just JQuery but not the entire JQueryUI library, use this one. I have used this one in the past and have been happy with it.

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

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

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

回答by subeebot

I found this one. Seems robust, well-maintained and is responsive.

我找到了这个。看起来很健壮，维护良好，反应灵敏。

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

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

回答by andy boot

I was quite impressed with the devbridgeautosuggest. Highly customizable

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