Skip to content

localComboboxを遅延読み込みする

by : 2017/04/18

大量のデータの中からアイテムの選択を容易にする localCombobox を遅延読み込みに対応させる方法を紹介します。

デモはこちらにあります。なお、ベースは hifiveのUIライブラリ紹介「localCombobox」」 を参考にしてください。

動作しているところは次のようになります。

urlオプションを指定する

例えばJSONを返すURLが http://example.com/index.json だったとします。そうした時には ComboBoxController をurlオプションとともに初期化します。

これだけでデータを外部から取得して適用するようになります。絞り込みを行う際には元のURL + “value=(入力値)” というリクエストがサーバにきます。サーバ側ではこのリクエストに合わせてデータを絞り込んで返す必要があります。

注意点

JSONデータは次のようなフォーマットになっている必要があります。

listというキーを持ち、その中にvalueというキーを持った配列になっている必要があります。

コンボボックスですが、最終的に文字列が値として入ります。つまり表示されている値がフォームにきます。


データの渡し方をカスタマイズしたい場合はAjaxを使って取得する形になるでしょう。Web API側を前述したような形式にできれば、多数の選択肢があるコンボボックスがすぐに実装できます。絞り込みをサーバ側で行った方が良いような、大量のデータがある時に使うと良いでしょう。

localComboboxの遅延読み込みデモ

banner_02

From → hifive

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。