localComboboxを遅延読み込みする
大量のデータの中からアイテムの選択を容易にする localCombobox を遅延読み込みに対応させる方法を紹介します。
デモはこちらにあります。なお、ベースは hifiveのUIライブラリ紹介「localCombobox」」 を参考にしてください。
動作しているところは次のようになります。
urlオプションを指定する
例えばJSONを返すURLが http://example.com/index.json だったとします。そうした時には ComboBoxController をurlオプションとともに初期化します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this._accountComboBoxController.init({ | |
| url: "http://example.com/index.json" | |
| }); |
これだけでデータを外部から取得して適用するようになります。絞り込みを行う際には元のURL + “value=(入力値)” というリクエストがサーバにきます。サーバ側ではこのリクエストに合わせてデータを絞り込んで返す必要があります。
注意点
JSONデータは次のようなフォーマットになっている必要があります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "list":[ | |
| {"value":"0000101"}, | |
| {"value":"0000102"}, | |
| : | |
| {"value":"0000999"} | |
| ] | |
| } |
listというキーを持ち、その中にvalueというキーを持った配列になっている必要があります。
コンボボックスですが、最終的に文字列が値として入ります。つまり表示されている値がフォームにきます。
データの渡し方をカスタマイズしたい場合はAjaxを使って取得する形になるでしょう。Web API側を前述したような形式にできれば、多数の選択肢があるコンボボックスがすぐに実装できます。絞り込みをサーバ側で行った方が良いような、大量のデータがある時に使うと良いでしょう。
hifive開発者ブログ 
コメントは受け付けていません。