コンテンツへスキップ

コンボボックスの有効/無効を切り替える

by : 2017/11/21

入力のサジェストができるコンボボックスコントローラで、入力の有効/無効を切り替える方法です。

実際のデモはJSFiddle上で試せます。

作り方

HTMLの実装

HTML側ではコンボボックスの有効、無効を切り替えるためのボタンを追加します。

<p>
Combobox: <input type="text" name="accountcode">
</p>
<p>
<div>
<input type="button" name="disable" value="disable" />
<input type="button" name="enable" value="enable" />
</div>
</p>

view raw
index.html
hosted with ❤ by GitHub

JavaScriptの実装

JavaScript側では、this._accountComboBoxController の enable/disableを実行して有効/無効を切り替えます。

'input[name="disable"] click': function() {
this._accountComboBoxController.disable();
},
'input[name="enable"] click': function() {
this._accountComboBoxController.enable();
},

view raw
index.js
hosted with ❤ by GitHub

JavaScript全体のコードは次のようになりなす。

(function($) {
var comboboxController = {
__name: 'ComboboxController',
/** コンボボックスコントローラ */
_accountComboBoxController: h5.ui.components.combobox.ComboBoxController,
__meta: {
_accountComboBoxController: {
rootElement: 'input[name="accountcode"]'
}
},
__ready: function() {
var data = [];
for (var i = 0; i < 500; i++) {
data.push({
value: ("0000"+i).slice(5)
})
}
this._accountComboBoxController.init({
data: data
});
},
'input[name="disable"] click': function() {
this._accountComboBoxController.disable();
},
'input[name="enable"] click': function() {
this._accountComboBoxController.enable();
},
};
h5.core.expose(comboboxController);
})(jQuery);
$(function() {
h5.core.controller('body', ComboboxController);
});

view raw
index.js
hosted with ❤ by GitHub


今回のデモはこちらにあります。入力を制限する際に使ってください。

From → hifive

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

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