HTML5 <datalist> 简介及兼容方案

2018-05-17

<datalist>是HTML5引入的新元素，用于输入提示。本文介绍<datalist>的语法、交互逻辑，并分别给出基于Vue和React的兼容方案。


语法

详情参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label for="myBrowser">Choose a browser from this list:</label>
  <input list="browsers" id="myBrowser" name="myBrowser" />
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Internet Explorer">
    <option value="Opera">
    <option value="Safari">
    <option value="Microsoft Edge">
  </datalist>


如果您正使用Chrome浏览器或Android手机，可以直接看看效果：


交互逻辑

两个核心元素：输入框、提示框。输入框由<input>定义，其中的list属性用于绑定相同id的datalist。提示框由<datalist>定义，每个<option>对应一个提示项。交互场景如下：

  1. 聚焦到输入框，未输入文字：不显示输入提示框
  2. 输入文字，尚未命中：提示框出现，显示与当前输入内容相近的备选项
  3. 输入文字，命中选项：提示框消失
  4. 点击提示项：输入框更新为选中的内容，提示框消失


备注：

  1. 上述第一个场景，聚焦到输入框时，浏览器在输入框右侧显示向下箭头。点击箭头出现提示框，包含所有的备选项。这个箭头的样式是可定义的，如果不想显示，这么定义： input::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
  2. 联想的标准：输入内容是否存在备选项的中，与indexOf相似，但不区分大小写；
  3. 满足上述条件的所有值都会显示，如果列表不够长，则出现滚动条。（这点体验并不友好，通常10个联想就已经够了。）
  4. <datalist>难以自定义样式，如有这方面需求，请使用下文的兼容方案。


兼容方案

兼容性参考：https://caniuse.com/#search=datalist

ios不兼容，别想在生产环境直接使用。想模拟<datalist>的体验，就得自己实现这套交互逻辑。


这里提供Vue版本和React版本供参考。




本文未经许可禁止转载，如需转载关注微信公众号【工程师加一】并留言。