H5标签datalist

实现输入框的搜索联想功能

简介
datalist标签的说明和用法
- 说明
- 用法
- 效果

简介

有的时候前端为了更好地实现输入框input的交互效果，需要增加搜索联想功能，除了使用已经封装好的组件或者自己手写js以外，我们可以使用datalist标签更简便地去实现这个功能。

datalist标签的说明和用法

说明

datalist标签用来定义选项列表，需要与 input 元素配合使用，来定义 input 可能的值；
datalist 元素及其选项不会被显示出来，它仅仅是合法的输入值列表；
所有主流浏览器都支持datalis标签，除了 Internet Explorer 和 Safari。

用法

input标签的list属性要与datalist标签的id属性一致才能进行绑定；

<input id="input"  list="input_list">
<datalist id="input_list"><option value="小红"><option value="小明"><option value="小丽"><option value="大华">
</datalist>

效果

1.当焦点移入输入框时，会展示所有的搜索集；
:
2.当输入内容后，搜索集会自动匹配相应的数据进行显示；

3.当输入的内容匹配不到搜索集的数据时，会自动变成输入框使用：

H5标签datalist相关推荐

html5语义化标签加粗,html5标签 H5标签
html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调倾斜元素 em 8.删除线2 ...
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
H5标签在IE浏览器下的兼容性问题
H5是在IE9以及以上浏览器中才支持,IE8及以下不支持H5标签,但是在IE9浏览器中还会存在一些问题 1.IE9中的问题 IE9浏览器会将H5部分语义化标签,解析为行内元素,比如:main标签. 解 ...
H5标签＜video＞安卓端兼容性问题
H5标签<video>在安卓端兼容问题 1.autoplay不能正常生效解决:使用muted属性可以自动播放 2.不能正常显示视频第一帧作为封面解决:使用poster="ti ...
HTML前端开发入门之表单标签/labei标签/datalist标签
##表单标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
2、前端开发：HTML知识总结——常用H5标签
h1-h6标签标题标签,粗体或大号,h1为一级标题,最粗最大. 搜索引擎使用标题为您的网页的结构和内容编制索引. 因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很 ...
html5标签 H5标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
小程序中页面兼容h5标签的解析
有时候当小程序向后台拿数据是一篇html标签的文章时,把它放进小程序会发现很多标签就不兼容,如果要一个个改又很麻烦,有没有方法可以很快地兼容html标签呢? 有个工具可以做到:wxParse 下载 ...
常用H5标签-第二部分
一.结构标签 1.header header是网页的头部 2.main main是网页的主体部分(一般就一个) 3.footer footer是网页的底部 4.nav nav是网页的导航 5.asid ...
常用H5标签-第三部分
目录一.超链接 1.功能: 2.属性: 3.锚点功能二.图片标签三.图片格式四.音视频一.超链接超链接是行内元素,它里面可以放任何元素,除了它自己可以是一个字,一段文字,图片,表格等 1 ...

H5标签datalist

实现输入框的搜索联想功能

简介

datalist标签的说明和用法

说明

用法

效果

H5标签datalist相关推荐

最新文章

热门文章