HTML の datalist 属性と input list 属性を使用して検索可能な選択ボックスを作成するにはどうすればよいですか?

ユーザー入力が強化された選択ボックスの作成

ユーザーはテキストを手動で入力するよりも選択ボックスの利便性を好むことがよくありますが、場合によっては、より多用途な入力オプションが必要です。検索機能が組み込まれた選択ボックスを導入すると、ユーザーは目的の項目を簡単に見つけることができます。

HTML の <datalist> を活用する<入力リスト>属性

この機能を実現する簡単なアプローチでは、HTML の <datalist> を利用します。 <入力リスト>属性。その仕組みは次のとおりです。

<code class="html">&lt;input list=&quot;brow&quot;&gt;
&lt;datalist id=&quot;brow&quot;&gt;
  &lt;option value=&quot;Internet Explorer&quot;&gt;
  &lt;option value=&quot;Firefox&quot;&gt;
  &lt;option value=&quot;Chrome&quot;&gt;
  &lt;option value=&quot;Opera&quot;&gt;
  &lt;option value=&quot;Safari&quot;&gt;
&lt;/datalist&gt;</code>

このコードでは、<input>要素は、関連付けられた <datalist> として「brow」を指定します。 <datalist> <オプション>が含まれています選択ボックスにリストされる項目を表す要素。

検索機能

ユーザーが入力フィールドに入力を開始すると魔法が起こります。ブラウザは自動的に <datalist> をフィルタリングします。入力に基づいて項目を選択し、関連するオプションのみを表示します。これにより、選択ボックス内でシームレスで直感的な検索エクスペリエンスが提供されます。

Bootstrap によるスタイリング

このソリューションは完全に機能しますが、Bootstrap を使用して外観と動作を強化できます。強力な CSS クラス。以下に例を示します。

<code class="html">&lt;div class=&quot;form-group&quot;&gt;
  &lt;label for=&quot;browser&quot;&gt;Browser:&lt;/label&gt;
  &lt;input list=&quot;brow&quot; class=&quot;form-control&quot; id=&quot;browser&quot;&gt;
&lt;/div&gt;
&lt;datalist id=&quot;brow&quot;&gt;
  ...
&lt;/datalist&gt;</code>

<input> をラップすることで、 <datalist> <form-group> 内の要素「form-control」クラスを追加すると、選択ボックスに、Bootstrap のスタイルと一致する、まとまりのあるモダンな外観が与えられます。

以上がHTML の datalist 属性と input list 属性を使用して検索可能な選択ボックスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。