html5实现输入框自动提示功能

晋天逸
2023-12-01

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>

 类似资料: