即座に検索可能なデータリストを作成する方法

ドロップダウンリストは オプションを提供する 特に利用可能なオプションのリストが長い場合、入力フィールドに対して。ユーザーは必要なオプションを選択できます。 フィールドに入力する, または オプションを見てください それは彼らが探しているもののための一致かもしれません. オプションを検索できること, しかし、理想的なソリューションです.

この動作は、 HTML要素 入力候補を表示します などのさまざまなコントロール用タグ。しかしながらユーザーが持っている場合にのみ利用可能なオプションを表示します 入力したもの 入力フィールドに.

ユーザーを有効にすれば、入力フィールドをより使いやすくすることができます。 オプションの全リストにアクセスする 入力取得プロセス中のいつでも.

この記事では、作成方法を説明します。 いつでも検索できるドロップダウンリスト を使用してタグ と同じです の id の tag - これは私たちがお互いにそれらを結び付ける方法です.

2.データリストを見えるようにする

デフォルトでは、 HTML要素は 隠された. 見ることができるのは、 入力を始める データリストが添付されているフィールドに.

しかし、データリストの内容（つまり、すべてのオプション）を「強制」する方法があります。 Webページに表示される. 私達はそれに適切なものを与えるだけです 表示 プロパティ値以外 無し, 例えば 表示ブロック;.

 データリストdisplay：block;

表示されたオプション まだ選択できません この時点では、ブラウザのみ オプションをレンダリングする データリストの中にあります.

前述したように、素子, 一部のオプションはすでに表示されており、選択可能です。, ただし、ユーザーがブラウザから入力できる文字列を入力し始めたときのみ 一致するオプションを見つける.

私達はまた作るためのメカニズムを見つける必要があります すべて オプション（上記のスクリーンショットではドロップダウンデータリストの下に表示されています） 選択可能 で 入力取得プロセスの他のポイント - ユーザーが何かを入力する前にオプションをチェックアウトしたい場合、または既に入力フィールドに何かを入力している場合.

3.持ち込みます HTML要素.

2つ目の方法は、より簡単で、使用が許可されているので選択します。 フォールバックメカニズムとして をサポートしていないブラウザでは素子。ブラウザがデータリストをレンダリングおよび表示できない場合は、 をレンダリングします HTMLタグ、コードは以下のようになります。

データリストとの組み合わせを追加複数の属性ユーザーがドロップダウンリストからオプションを選択すると、その値がフィールドも. / *ユーザーがDDLからオプションを選択したとき、それをテキストフィールドに書き込む* / select.addEventListener（ 'change'、fill_input）; function fill_input（）input.value = options [this.selectedIndex] .value; hide_select（）; 欠点この手法の主な欠点は、スタイルを設定する直接的な方法がない素子 CSSで（の外観そして