利用HTML5的DataList元素实现输入提示

最新推荐文章于 2021-06-03 19:15:33 发布

weixin_34007906

最新推荐文章于 2021-06-03 19:15:33 发布

阅读量130

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/lvhuizhenblog/blog/465736

版权

2019独角兽企业重金招聘Python工程师标准>>>

今天看到datalist 这个元素，可以用来预先定义一个输入框的潜在选项，也就是我们在平时项目中经常用jQuery插件或者自己写JS来实现的autocomplete「自动补全，但似乎自动提示更贴切一些」功能。

具体来说，页面上的input还是原来的input，只是在它的下面定义一下新的datalist在其中填充触发提示的文本,同时在该input元素上指定list属性指向这个list。一个大概的例子大概是像下面这样

<html>
<head>
</head>
<body>
你最喜欢的浏览器是： <input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
</body>
</html>

原文链接：http://my.oschina.net/lvhuizhenblog/admin/new-blog

转载于:https://my.oschina.net/lvhuizhenblog/blog/465736