datalist自动完成

1、传统输入框

<label for="favorite_team">Favorite Team:</label><input type="text" name="team" id="favorite_team" />

2、使用datalist

给input增加一个list属性，属性值为datalist的id值。

双击input或者输入一个匹配的首字母的时候可以提供选项让用户选择。

<label for="favorite_team">Favorite Team:</label><input type="text" name="team" id="favorite_team" list="team_list" /><datalist id="team_list">  <option>Detroit Lions</option>  <option>Detroit Pistons</option>  <option>Detroit Red Wings</option>  <option>Detroit Tigers</option>  <!-- etc... --></datalist>

有一点要注意：可以给datalist中的option指定value值，但是指定value值后，用户通过下拉列表选择后，文本框中将显示value值。

3、何时使用？

选择不太多的场景下，使用一般的下拉就可以了。

如果需要用户在很多数据中去选择，则可以建议使用datalist下拉建议提示框，因为可以方便用户快速检索去选择。

一个典型的场景就是对世界各个国家的选择。

4、浏览器不支持怎么处理？

点我查看浏览器支持。

IE10+，Firefox 4+,Chrome 20+和Opera是支持datalist的，对于不支持的浏览器，可以优雅降级。

1）datalist中嵌套使用传统的select下拉选择框

在提供传统的select下拉文本框的同时，提供给用户能输入普通文本的文本框。

<body ><label for="country">Country:</label> <datalist id="country_list">  <select name="country">   <option value="AF">Afghanistan</option>   <option value="AX">Åland Islands</option>   <option value="AL">Albania</option>   <option value="DZ">Algeria</option>   <option value="AS">American Samoa</option>   <!-- more -->  </select>  If other, please specify: </datalist> <input type="text" name="country" id="country" list="country_list"> </body>