如何使用 HTML 和 Bootstrap 建立可搜尋的選擇框？

建立具有搜尋功能的進階選擇框

增強傳統選擇框的搜尋功能可以顯著提高使用者體驗和資料輸入效率。這是使用 HTML 和 Bootstrap 來實現此目的的解決方案。

實作：

實作涉及建立一個帶有文字欄位和選取框的表單，如下所示：

<code class="html"><form>
  <input type="text" list="brow" placeholder="Search...">
  <datalist id="brow">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
  </datalist>

  <select>
    <option value="ie">Internet Explorer</option>
    <option value="ff">Firefox</option>
    <option value="cr">Chrome</option>
  </select>
</form></code>

• 文字欄位：具有清單屬性的文字欄位允許使用者輸入內容並顯示資料清單中的符合選項。
• 資料清單： 資料清單定義了搜尋欄位的預先定義選項清單。
• 選擇框： 選擇框提供傳統的選項選擇，也可以根據

自定義：

Bootstrap 提供了多種類來自訂文字欄位和選擇框的外觀，例如新增輸入組或不同元件的樣式。例如，以下CSS 將搜尋圖示加入文字欄位：

<code class="css">input[list] {
  padding-right: 30px;
}

input[list]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: url(search.png) no-repeat;
  background-size: contain;
}</code>

結論：

透過結合HTML、Bootstrap 和簡單的程式碼片段，我們可以建立一個具有搜尋功能的功能強大的選擇框。該解決方案提供了一種更方便、用戶友好的數據輸入方式，對於長列表或複雜列表特別有用。

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