html5实现输入框自动提示功能之------datalist标签
2017-06-23 08:36
786 查看
1.我们有时需要在一个文本框中进行输入的时候，要求出现信息的自动提示功能。
比如:当我们检索地址时,输入"西",则出现一个下拉框,里面包含所有包含"西"字的地址。
2.实现原理:其中利用html5的datalist标签,并在input框中添加list属性,list的值和datalist的id属性相同即可。
3.具体的实现代码如下。
<!DOCTYPE html>
<html>
<head>
<title>下拉列表的提示</title>
</head>
<body>
地址:<input type="text" name="link" list="city_list"/>
<datalist id="city_list">
<option label="xian">西安</option>
<option label="beijing">北京</option>
<option label="shanghai">上海</option>
</datalist>
</body>
</html>
比如:当我们检索地址时,输入"西",则出现一个下拉框,里面包含所有包含"西"字的地址。
2.实现原理:其中利用html5的datalist标签,并在input框中添加list属性,list的值和datalist的id属性相同即可。
3.具体的实现代码如下。
<!DOCTYPE html>
<html>
<head>
<title>下拉列表的提示</title>
</head>
<body>
地址:<input type="text" name="link" list="city_list"/>
<datalist id="city_list">
<option label="xian">西安</option>
<option label="beijing">北京</option>
<option label="shanghai">上海</option>
</datalist>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用原生HTML5控件实现输入框自动提示（下拉列表补全）功能
- HTML5----input-datalist输入框自动提示功能
- html5实现输入框自动提示功能
- 用原生HTML5控件实现输入框自动提示（下拉列表）
- js输入框邮箱自动提示功能代码实现
- HTML5----input-datalist输入框自己主动提示功能
- js实现输入框自动提示功能
- js输入框邮箱自动提示功能代码实现
- js输入框邮箱自动提示功能代码实现
- <datalist>标签实现提示功能
- Html5新标签datalist实现输入框跟后台数据库数据的动态匹配
- 简单代码autocomplete="off"实现禁用input输入框的自动提示功能
- Android编程实现输入框动态自动提示功能
- 简单的js+css的输入框自动提示功能实现
- ajax实时查库，实现输入框的自动完成提示框功能
- 使用python代码实现三叉搜索树高效率”自动输入提示”功能
- Eclipse添加DTD文件实现xml的自动提示功能
- WinForm中实现汉字首字母文本输入框自动提示(AutoCompleted)
- 实现Flash的TextInput输入框自动填写功能
- 基于jquery实现的类似百度搜索的输入框自动完成功能