3.6 用datalist标签实现自动提示功能
本节介绍使用HTML 5表单的datalist标签实现自动提示功能。在HTML 5规范标准中，datalist标签用于定义选项列表，并与input标签配合起来使用。在实际应用中，DataList中的选项不会被显示出来，其仅提供合法的输入值列表。
下面我们看一段在HTML 5表单中使用datalist标签的代码，这段代码（参见源代码chapter03/ch02-HTML 5form-input-datalist.html文件）给出一种使用datalist标签的方法。
【示例3-5】 datalist标签的使用
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <script type="text/css">
06 label {
07 margin: 4px;
08 width: 96px;
09 text-align: justify;
10 }
11 input {
12 margin: 4px;
13 }
14 </script>
15 <title>HTML 5表单之datalist标签</title>
16 </head>
17 <body>
18 <!-- 添加文档主体内容 -->
19 <h3>HTML 5表单之使用datalist标签实现自动提示</h3>
20 <!-- 添加文档主体内容 -->
21 <form action="#" method="get" autocomplete="on">
22 <label for="id-datalist">DataList:</label><br>
23 <input id="id-datalist" list="web" />
24 <datalist id="web">
25 <option value="HTML 5">
26 <option value="CSS3">
27 <option value="JavaScript">
28 <option value="jQuery">
29 <option value="Node">
30 </datalist>
31 </form>
32 </body>
33 </html>
在这段HTML代码中，定义了一个forms标签、一个input标签和一个datalist标签。下面我们详细介绍。
第21～31行代码通过form标签定义了一个HTML 5表单，其中action属性定义为提交到当前页面，method属性定义为get方式。
第22～23行代码定义了一个type="text"类型的input标签，并通过list属性（list="web"）绑定其后的datalist标签选项。
第24～30行代码定义了一个datalist标签，并通过id值（id="web"）绑定在上面的input标签上；第24～29行代码通过option标签定义了一组可选的选项值。
运行测试这个页面，单击input标签右侧的下拉按钮，效果如图3.13所示。如果我们在input标签中输入第一个字符“H”，就会自动提示首字母为“H”的选项值，效果如图3.14所示。
图3.13 datalist标签的使用（1）
图3.14 datalist标签的使用（2）
如果我们在input标签中输入第一个字符“j”，就会自动提示首字母为“j”的选项值，效果如图3.15所示。从图中可以看到，首字母不区分大小写，输入字母“j”后，JavaScript和jQuery选项值都出现在自动提示框中了。
图3.15 datalist标签的使用（3）