下拉框中選項的快速定位


對於選項很多的下拉框 <select>,人工定位到想要的項目是很費勁的。瀏覽器其實原生支持下拉選擇框根據鍵盤輸入自動定位到相應條目的。

通過輸入條目字母定位到下拉框中條目的位置

通過輸入條目字母定位到下拉框中條目的位置

方便是方便,有個問題是連續輸入不能間隔太久,這個間隔實測中感受是非常短的,如果想找的條目比較難輸入,就無法在短時間內完成這個操作。

那有沒有相應 API 修改這個間隔時間呢?不能,至少我還沒找到。

<datalist>

其實 HTML5 中提供了另外一個元素,<datalist>。用它結合一個文本輸入框可實現 Combo box 的效果,即根據輸入自動篩選列表中的元素。

<input type="text" id="names" list="nameList" />
<datalist id="nameList">
  <option value="Larhonda Trentham">Larhonda Trentham</option>
  <option value="Nicola Madigan">Nicola Madigan</option>
  ...
</datalist>

創建 <datalist> 元素並指定 id 值,同時將候選項放入 <option> 作為其子元素。然后為輸入框指定 list 屬性,值便是 <datalist>id

利用 HTML5 datalist 元素實現 combbox

通過輸入條目字母定位到下拉框中條目的位置

瀏覽器兼容性

IE10+ 可安心食用,詳情參見 MDN 的數據

相關資源


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM