1. 背景介绍
我们时常在<input />获取焦点时，发现有些<input />会自动把之前输入过的历史记录展示出来，例如像这样的：
但是呢，有些
<input />又不会啊，查阅资料后，总结出以下三种情况：
为了提供自动完成功能，用户代理可能需要
<input>/<select>/<textarea>元素才能:
1. 具有name和/或id属性
2. 成为<form>的后代
3. 具有 submit 按钮的表单
详见《The HTML 自动完成属性》，这边不在做过多讲述，因为今天的重点不在这里。
2. 如何配置历史记录值
方式一（不推荐）
你可以在<input />的onfoucs事件，手动给它弄出个弹框，再将预先想要选择的options罗列出来，然后点击每个值触发的onclick事件，再给<input />设置值。
好像大体上实现了这个功能，但是成本太大了，还有一系列css样式，全部需要自己写。
so，deprecate it !!!
方式二（推荐）
<label>Name</label><input id="country_name" name="country_name" type="text" list="city" />
<datalist id="city">
<option value="中国 北京" />
<option value="中国 上海" />
<option value="中国 广州" />
<option value="中国 深圳" />
<option value="中国 东莞" />
</datalist>
兴致勃勃拿去代码一试，看到效果如下：
一脸苦恼，怎么出现了一个奇怪的三角形？怎么还出现以前的输入框的历史记录了？
解决方案一并给你~
- 解决输入框以前的历史记录(给input添加autocomplete属性，值为off)
<input autocomplete="off" /> - 解决三角形(在你的style文件里添加以下样式)
input::-webkit-calendar-picker-indicator{ display: none; -webkit-appearance: none; }
