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

by moongift : 2017/11/21

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

作り方

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側では、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

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