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>

兴致勃勃拿去代码一试，看到效果如下：

一脸苦恼，怎么出现了一个奇怪的三角形？怎么还出现以前的输入框的历史记录了？

解决方案一并给你~

1. 解决输入框以前的历史记录(给input添加autocomplete属性，值为off)
   <input autocomplete="off" />
2. 解决三角形(在你的style文件里添加以下样式)
   input::-webkit-calendar-picker-indicator{ display: none; -webkit-appearance: none; }