コンボボックス（select）はHTML標準で提供されます。選択肢が少ないときには問題ありませんが、数百の中から選択するとなると大変です。名前順に並んでいたとしても、ユーザビリティが高いとは言えないでしょう。
そこで使ってみたいのがlocalComboboxです。インクリメンタルな検索機能付きのコンボボックスです。
デモはJSFiddle上で公開しています。実際の動きは次のようになります。
作り方
HTML
HTMLは次のように inputのtype=”text” で定義します。
また、hifive本体とは別に以下のファイルを読み込みます。
JavaScript
JavaScriptはまず ComboBoxController を読み込みます。rootElementにはHTML側のインプットを指定します。
__ready内ではコンボボックスコントローラに対してデータを適用します。これはAjaxを使っても問題ありません。デモでは分かりやすいように配列にしています。
最後にコントローラをバインドして完了です。
これで文字列検索を使ってインクリメンタルに絞り込めるコンボボックスが使えます。データリソースはAjaxを使ってデータベースから取ってくることもできますので、大量のデータでも扱いやすくなるでしょう。
デモを使って体験してみてください。
hifive – HTML5企業Webシステムのための開発プラットフォーム
