html怎么设计自动出现提示的数据列表？怎么设计数据列表像百度一样怎么随用户输入而更新

最新推荐文章于 2021-07-15 15:47:06 发布

成长的小牛233

最新推荐文章于 2021-07-15 15:47:06 发布

阅读量932

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/dreamzuora/article/details/78323601

版权

web 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello</title>
	</head>
	<body>
		<h2>输入查询的城市</h2>
			
		<form autocomplete="on">
		 	<input type="text" id="search_city" list="cityList"/>
<!--
定义和用法

autocompete 属性设置为on时候，可以使用html5中新增的datalist便签和list属性提供一个数据列表供用户选择

display 属性规定元素应该生成的框的类型。
说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。
默认值： 	inline
继承性： 	no
版本： 	CSS1
JavaScript 语法： 	object.style.display="inline"
                                                                  -->
			<datalist id="cityList" style="display: :none;">
				<option value="Beijing">北京</option>
				<option value="shanghai">上海</option>
				<option value="tianjin">天津</option>
				<option value="chongqing">重庆</option>
				<option value="shenzhen">深圳</option>
			</datalist>
		</form>
	</body>
</html>