Facebook風オートコンプリート複数項目フィールド jQuery Tokeninput
Facebook 風のUIを使いたいということになって、いろいろライブラリを探してたらこれが一番よさげだった。
導入方法も簡単。
ダウンロードしてきた javascript や sytlesheet を配置し、ロードする。
以下のスクリプトを記述。
/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
テキストボックスのテーマ
その他、コールバックなどもありますよ。