web-dev-qa-db-ja.com

FacebookスタイルのJQueryオートコンプリートプラグイン

Facebookのようにオートコンプリートを行うプラグインの後、複数のアイテムを選択できるという点で-Stackoverflowの質問のタグ付けと同様です。

ここに私が出会ったカップルがあります：

これらのいずれかを試しましたか？それらは簡単に実装およびカスタマイズできましたか？

jqueryjquery-pluginsautocomplete
78
Luke Lowrey

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

私はこれを試しただけで、asp.netページを使用してJSONを（検索パラメータから）出力することで実装するのは本当に簡単でした。

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

これはとても良い！ 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);
});

上記を行うと、異なるオプションと異なるデータセットを渡すことができます。以下は、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"});
28
webcgo

これは私が見つけたもので、順不同です。

22
philfreo

fbやtwのようなユーザー言及機能を探しているなら、これは良いプラグインです http://podio.github.io/jquery-mentions-input/

4
vikas devde

これは、JQueryUIに統合される前のオリジナルのJQueryオートコンプリートプラグインです。 JQueryUIライブラリ全体ではなくJQueryのみを提供する場合は、これを使用してください。私はこれを過去に使用し、満足しています。

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

3
James Lawruk

これを見つけました。堅牢で、よく維持され、応答性が高いようです。

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

1
subeebot

devbridge autosuggestには非常に感銘を受けました。高度にカスタマイズ可能

0
andy boot