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

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

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

HTML の

この機能を実現する簡単なアプローチでは、HTML の

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

このコードでは、要素は、関連付けられた

検索機能

ユーザーが入力フィールドに入力を開始すると魔法が起こります。ブラウザは自動的に

Bootstrap によるスタイリング

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

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

をラップすることで、

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