autoComplete.jsを使ってみる

フォームの入力補完ができるJavaScriptのライブラリ「autoComplete.js」を使ってみます。

対応ブラウザ

対応ブラウザは公式ドキュメント内に記載がありますが、基本的に各ブラウザの最新バージョンのみの対応で、IEは非対応となっているようです。

設定方法

まずは使用するファイルを読み込みます。
今回はCDNを使用します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/css/autoComplete.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/js/autoComplete.min.js"></script>

入力補完するinput要素を用意します。

<input id="autoComplete">

デフォルトの結果一覧が左右中央位置に配置されてしまうので、marginを消しておきます。

#autoComplete_list {
	margin: 0;
}

入力補完で使用するリスト(配列)を用意します。

var nameList = [
	'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'
];

先程の配列を使ってライブラリの設定を行います。

var autoCompletejs = new autoComplete({
	data: {
		src: nameList
	},
	resultsList: {
		render: true
	}
});

これで入力補完できるようになりました。
入力補完のデモページ

配列の中身は文字列でなくオブジェクトでも動作します。

var nameList = [
	{
		"name": "satou",
		"from": "Tokyo"
	}, {
		"name": "suzuki",
		"from": "Hokkaido"
	}, {

	〜 略 〜

	}, {
		"name": "fujii",
		"from": "Tokyo"
	}
];

配列の中身をオブジェクトにする場合、対象のキーを指定する必要があります。

var autoCompletejs = new autoComplete({
	data: {
		src: nameList,
		key: ['name', 'from']
	},
	resultsList: {
		render: true
	}
});

この場合、nameかfromで入力補完ができます。
入力補完のデモページ2

次に、データが日本語でも問題ないかどうか試してみます。

var nameList = [
	'愛園愛美', '相羽ういは', '赤羽葉子', '朝日南アカネ', '飛鳥ひな', '安土桃', '天宮こころ', '雨森小夜', 'アルス・アルマル', 'アンジュ・カトリーナ',

	〜 略 〜

	'リゼ・ヘルエスタ', '緑仙', '竜胆尊', 'ルイス・キャミー', 'レヴィ・エリファ', '童田明治'
];

ライブラリの設定は最初と同じです。
確認してみた限り、日本語でも特に問題なさそうでした。
日本語での入力補完のデモページ2

オプション

用意されているオプションをいくつか試してみます。
詳しくは公式のドキュメントをご確認ください。

フォーカスを外した時に入力補完を非表示にする

ライブラリはデフォルトだとinputからフォーカスを外した際に、入力補完のリストが消えないようです。
公式のデモ内にリストを非表示にする処理があったので、試してみます。

var autoCompletejs = new autoComplete({
	data: {
		src: nameList
	},
	resultsList: {
		render: true
	}
});

// フォーカス時にリスト表示・フォーカスを外した時にリストを非表示にする
["focus", "blur"].forEach(function(eventType) {
	var resultsList = document.querySelector("#autoComplete_list");
	document.querySelector("#autoComplete").addEventListener(eventType, function() {
		if (eventType === "blur") {
			resultsList.style.display = "none";
		} else if (eventType === "focus") {
			resultsList.style.display = "block";
		}
	});
});

フォーカスを外した時にリストを非表示にするデモページ