コンテンツへスキップ

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

by : 2016/10/11

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

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

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

作り方

HTML

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

<input type="text" name="accountcode">

view raw
index.css
hosted with ❤ by GitHub

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

JavaScript

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を使ってデータベースから取ってくることもできますので、大量のデータでも扱いやすくなるでしょう。

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


hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

From → hifive

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

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