如何使用 HTML 的資料清單和輸入清單屬性建立可搜尋的選擇框？

創建具有增強用戶輸入功能的選擇框

用戶通常更喜歡使用選擇框來手動輸入文本，但有時會出現需要更通用的輸入選項。引入具有內建搜尋功能的選擇框，使用戶可以輕鬆找到所需的項目。

利用 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>

在此程式碼中，元素指定「brow」作為關聯的

搜尋功能

當使用者開始在輸入欄位中鍵入時，奇蹟就會發生。瀏覽器會自動過濾

使用 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>

透過包裝和 中的元素並新增「form-control」類，您將為選擇框提供與Bootstrap 樣式一致的內聚且現代的外觀。

以上是如何使用 HTML 的資料清單和輸入清單屬性建立可搜尋的選擇框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！