模仿datalist标签，仿百度写法

最新推荐文章于 2021-06-24 06:05:08 发布

nature_fly088

最新推荐文章于 2021-06-24 06:05:08 发布

阅读量1.3k

点赞数

分类专栏：前端JS

本文链接：https://blog.csdn.net/nature_fly088/article/details/78547296

版权

前端JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

使用datalist时，ie9不支持。而且datalist如果数据从后台获取时，需要从新在点击一下文本框才能显示筛选内容。所以就自己实现了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		 <style>
		 	* {
		 		padding: 0;
		 		margin: 0;
		 		border: none;
		 	}
		 	.wrap {
		 		position: relative;
		 		width: 368px;
		 	}
		 	.wrap input {
		 		width: 300px;
		 		height: 20px;
		 		border: 1px solid #778899;
		 		box-sizing: border-box;
		 	}
		 	#cities {
				position: absolute;
				top: 24px;
				right: 0;
				width: 300px;
				max-height: 400px;
				overflow: auto;
				list-style: none;	
				border: 1px solid #778899;

				border-top: none; 
				display: none;
				/*display: none;*/
		 	}
		 	#cities li:hover{
				background-color: #87CEFA;
		 	}
		 </style>
	</head>
	<body>
		<div class="wrap">
选择城市:<input type="text" name="cname" list="cities" id="workUnit" autofocus="true"/>
<ul id="cities">
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//需要添加的数据内容,可以通过ajax请求获取
var cities = [
{label:"xian",value:"西安"},
{label:"hubei",value:"湖北"},
{label:"wuhai",value:"武汉"}
]; 
//获取datalist的dom
var ss = document.getElementById("cities");
//定义加载城市的函数
function loadcities(){
	var innerHtmlStr="";
	for(var i = 0;i < cities.length; i ++){
		var city = cities[i];
		innerHtmlStr+='<li οnclick="setValToInput(this)">'+city.value+'</li>';	
	}
	//jquery实现的方式		
		$("#cities").html(innerHtmlStr);
		$("#cities").css("display","block")
}

//对比输入框关键词的变化
keywordLength=0;
$('#workUnit').keyup(function(e){
	selectLength = 0;
	var keyword = $('#workUnit').val().trim();
	if (keyword == ""){
		return false;
	}
	switch(e.keyCode){
		case 37:
		case 38:
		case 39:
		case 40:
		case 13:
		case 9:
		return false;
	}
		//判断输入了新字符，避免输入汉字时重复提交
	if(keyword.length==keywordLength){
	return false;
	}else{
		keywordLength=keyword.length;
	}
	//模仿从后台ajax请求数据
	loadcities();
});
//获取点击的li,并赋值到input中
function setValToInput(e){
	
	var obj=$(e);
	if(obj.length>0){	
	var liObj=obj[0].innerHTML;
	console.log(liObj);
	$("#workUnit").val(liObj);
	$("#cities").css("display","none")
	}
}
</script>