《图解HTML练习》- 实现下拉选择不是只有select

datalist标签

定义和用法

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

示例

datalist标签,这个标签制作的下拉可省了不少事呢……此处注意input里的list=“li”与datalist里的id=“li”。


贴上一段简短的代码:

<!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的位置
  • 不能控制每次当用户输入多少个字符后,就出现下拉建议列表
  • 不能控制大小写敏感,或当匹配什么样的字符就出现下拉建议列表
  • 不能将其与服务端的数据源绑定
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章