《图解HTML练习》- 实现下拉选择不是只有select
2021-08-12 本文已影响0人
张中华
datalist标签
定义和用法
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
示例
datalist标签，这个标签制作的下拉可省了不少事呢……此处注意input里的list=“li”与datalist里的id=“li”。
datalist使用展示.gif
贴上一段简短的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
请输入姓名：<input type="text" list="li"/>
<datalist id="li">
<option>
张三
</option>
<option>
李四
</option>
<option>
王五
</option>
</datalist>
</body>
</html>
Datalist的限制
当然，Datalist也有限制和不足之处，体现在：
- 不能使用CSS去随意控制或改变其下拉建议列表中的项
- 不能控制datalist的位置
- 不能控制每次当用户输入多少个字符后，就出现下拉建议列表
- 不能控制大小写敏感，或当匹配什么样的字符就出现下拉建议列表
- 不能将其与服务端的数据源绑定
