hifiveのUIライブラリ紹介「localCombobox」

by moongift : 2016/10/11

コンボボックス（select）はHTML標準で提供されます。選択肢が少ないときには問題ありませんが、数百の中から選択するとなると大変です。名前順に並んでいたとしても、ユーザビリティが高いとは言えないでしょう。

そこで使ってみたいのがlocalComboboxです。インクリメンタルな検索機能付きのコンボボックスです。

デモはJSFiddle上で公開しています。実際の動きは次のようになります。

作り方

HTMLは次のように inputのtype=”text” で定義します。

view raw

index.css

hosted with ❤ by GitHub

また、hifive本体とは別に以下のファイルを読み込みます。

JavaScriptはまず ComboBoxController を読み込みます。rootElementにはHTML側のインプットを指定します。

	var comboboxController = {
	__name: 'ComboboxController',
	/** コンボボックスコントローラ */
	_accountComboBoxController: h5.ui.components.combobox.ComboBoxController,
	__meta: {
	_accountComboBoxController: {
	rootElement: 'input[name="accountcode"]'
	}
	},
	__ready: function() {
	}
	};
	h5.core.expose(comboboxController);

view raw

index.html

hosted with ❤ by GitHub

__ready内ではコンボボックスコントローラに対してデータを適用します。これはAjaxを使っても問題ありません。デモでは分かりやすいように配列にしています。

	var data = [];
	for (var i = 0; i < 500; i++) {
	data.push({
	value: ("0000"+i).slice(–5)
	})
	}
	this._accountComboBoxController.init({
	data: data
	});

view raw

index.js

hosted with ❤ by GitHub

最後にコントローラをバインドして完了です。

	$(function() {
	h5.core.controller('body', ComboboxController);
	});

view raw

index.js

hosted with ❤ by GitHub

これで文字列検索を使ってインクリメンタルに絞り込めるコンボボックスが使えます。データリソースはAjaxを使ってデータベースから取ってくることもできますので、大量のデータでも扱いやすくなるでしょう。

デモを使って体験してみてください。

From → hifive

コメントは受け付けていません。