<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>hello</title></head><body><h2>输入查询的城市</h2><form autocomplete="on"><input type="text" id="search_city" list="cityList"/>
<!--
定义和用法autocompete 属性设置为on时候，可以使用html5中新增的datalist便签和list属性提供一个数据列表供用户选择display 属性规定元素应该生成的框的类型。
说明这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。
默认值： inline
继承性： no
版本： CSS1
JavaScript 语法： object.style.display="inline"--><datalist id="cityList" style="display: :none;"><option value="Beijing">北京</option><option value="shanghai">上海</option><option value="tianjin">天津</option><option value="chongqing">重庆</option><option value="shenzhen">深圳</option></datalist></form></body>
</html>
当用户输入城市开头字母会自动提示城市名
