Facebook風オートコンプリート複数項目フィールド jQuery Tokeninput

Facebook 風のUIを使いたいということになって、いろいろライブラリを探してたらこれが一番よさげだった。

jQuery Tokeninput

導入方法も簡単。
ダウンロードしてきた javascript や sytlesheet を配置し、ロードする。
以下のスクリプトを記述。

javascript

/path/ にはレスポンスが json な URL を指定すると、非同期でリクエストします。
また、あらかじめデータを用意して置くことも可能です。

var data = [{id: 1, name: "あいうえお"}, {id: 2, name: "かきくけこ"}];

リンク先のデモを見てもらえばわかりませすが、テーマがデフォルトでは3種類用意されています。
facebook 風にするには…

とします。他にもオプションはたくさんあります。
全部は載せませんが、使えそうなヤツを…。

検索の設定

  • method

リクエストを飛ばすときのHTTP method。デフォルトは GET 。

  • queryParam

クエリストリングの名前。デフォルトは q 。

  • minChars

最低何文字目から検索をするか。 デフォルトは1文字目から。

  • propertyToSearch

検索対象の属性を指定。デフォルトは name 。
初期値の設定

  • prePopulate

初期値のオブジェクトを設定。デフォルトは null 。上で記載している data のように書けばいい。
表示の設定

  • htmlText

テキストフィールドをクリックしてドロップダウンラベルが表示されるが、そのときに表示されるテキスト。
デフォルトは “Type in a search term” 。

  • noResultsText

検索結果がなかったときに表示されるテキスト。デフォルトは “No results” 。

  • searchingText

検索中に表示されるテキスト。デフォルトは “Searching…” 。

  • theme

テキストボックスのテーマ

その他、コールバックなどもありますよ。