datalist实现输入联想

最新推荐文章于 2022-07-07 14:55:18 发布

iteye_14715

最新推荐文章于 2022-07-07 14:55:18 发布

阅读量192

点赞数

分类专栏： web 文章标签： html5 web前端

web 专栏收录该内容

2 篇文章

订阅专栏

用HTML5的datalist属性可以比较简单的实现输入联想功能，代码如下：

<html>
	<head>
	<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
//datalist添加联想内容
$(function($){
$("#associate option").remove();
//数据
var str = eval('[{"message":1},{"message":2}]');
//绑定到associate
 $.each(str, function() {
       $("#associate").append("<option value='"+this.message+"'>");
    });
})
</script>
	</head>
	<body>
		<input type="text" list="associate">
		<datalist id="associate">
		</datalist>
	</body>
</html>