JavaScriptでのオートコンプリート

ここではオートコンプリートを実装します。この用語は、入力欄にテキストを入力する際に表示されるドロップダウンのヒントを指します。例を見てみましょう。以下に、国名を入力できる入力欄を作成しました。ここでいくつかの文字を入力すると、入力された文字列で始まる国々のリストが入力欄の下に表示されます。

必要に応じて、国名全体を入力せずに、マウスで任意の国をクリックすれば、それが入力欄に表示されるようにできます。これが、オートコプリートが一般的に必要な理由です。簡単のため、例では3つの国だけを設定しています: Belarus、Belgium、Bulgariaです。以下の入力欄に、最初に英語の 'B' を、次に 'e' と入力して、何が起こるか確認してください:

解説

どのようにこの課題を解決するか話し合いましょう。国名の配列を作成する必要があります。私の場合は次のようになります:

let arr = ['Belarus', 'Belgium', 'Bulgaria'];

入力欄にテキストを入力する際、各文字の入力ごとに国の配列を走査し、入力された文字列で始まる国を取得する必要があります。これは filter メソッドと startsWith メソッドを使用すると便利です。

filter を使用すると、入力された文字列で始まる国の配列を取得できます。次に、この配列をループで走査し、国名を持つリスト項目で ul リストを埋める必要があります。そして、これは各文字の入力ごとに、事前にulから以前に作成されたリスト項目を削除して行う必要があります。

あなたの便宜のために、完成したマークアップを以下に示します:

<div id="parent">
	<input id="elem">
	<ul id="list"></ul>
</div>
text text text text text

#parent {
	position: relative;
}
#elem {
	padding: 5px;
	font-size: 18px;
}

#parent ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: white;
}
#parent li {
	border: 1px solid gray;
	font-size: 18px;
	padding: 5px;
}
#parent li:hover {
	border: 1px solid black;
	cursor: pointer;
}

上記のHTMLコードとCSSコードをコピーしてください。説明されたアルゴリズムに従ってオートコンプリートを実装してください。