autocomplete属性を使ってみる

フォーム入力時に候補を表示して、自動補完させることのできるautocomplete属性を使ってみます。

サンプルコード

入力候補を出したいinputに対してautocomplete属性を設定して、値はonにします。
入力候補のリストはdatalistを使って定義して、inputのlist属性の値とdatalistのidの値を同じ(今回の場合はname)にして紐付けします。

<form>
	<input type="text" autocomplete="on" list="name">
	<datalist id="name">
		<option value="satou"></option>
		<option value="suzuki"></option>
		〜 略 〜
		<option value="fujii"></option>
	</datalist>
</form>

これで入力内容に合わせて候補が表示されるようになりました。
autocomplete属性のデモページ

先ほどはHTML内に入力候補を記述しましたが、次はJavaScriptで設定できるようにしてみます。

<form>
	<input type="text" id="sample">
</form>

JavaScriptでinputの設定、datalistタグの作成を行います。

// inputの設定
var input = document.getElementById('sample');
input.autocomplete = true;
input.setAttribute('list', 'name');

// 入力候補のリスト
var names = [
	'satou', 'suzuki', 'tanaka', 'takahashi', 'itou', 'yamamoto', 'watanabe', 'nakamura', 'kobayashi', 'katou',
	'yoshida', 'yamada', 'sasaki', 'yamaguchi', 'matsumoto', 'inoue', 'kimura', 'hayashi', 'saitou', 'shimizu',
	'yamazaki', 'abe', 'mori', 'ikeda', 'hashimoto', 'yamashita', 'ishikawa', 'nakajima', 'maeda', 'fujita',
	'gotou', 'ogawa', 'okada', 'murakami', 'hasegawa', 'kondou', 'ishii', 'sakamoto', 'endou', 'fujii'
];

// datalistタグの作成
var datalist = document.createElement('datalist');
datalist.id = 'name';
for (var i = 0; i < names.length; i++) {
	var option = document.createElement('option');
	option.value = names[i];
	datalist.appendChild(option);
}
document.body.appendChild(datalist);

これで先ほどと同様に入力候補を表示できました。
入力候補をJavaScriptで設定するデモページ

今回は入力候補をJavaScriptの変数にべた書きしましたが、jsonなどで入力候補を出力するようにして、Ajaxを使って表示するようにすると使い勝手が良いかもしれません。