首頁  >  文章  >  web前端  >  如何使用 HTML 的資料清單和輸入清單屬性建立可搜尋的選擇框?

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

Linda Hamilton
Linda Hamilton原創
2024-10-31 09:48:29682瀏覽

How can I create a searchable select box using HTML's datalist and input list attributes?

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

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

利用 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn