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

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

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

解説

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

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

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

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

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

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

css#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;
}