下拉框中选项的快速定位

Posted 2021-02-17 wayou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉框中选项的快速定位相关的知识，希望对你有一定的参考价值。

对于选项很多的下拉框 <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。

通过输入条目字母定位到下拉框中条目的位置

浏览器兼容性

IE10+ 可安心食用，详情参见 MDN 的数据。

下拉框中选项的快速定位

<datalist>

浏览器兼容性

相关资源

`<datalist>`