JS实现百度搜索下拉框

最新推荐文章于 2022-08-30 08:06:31 发布

hohocj

最新推荐文章于 2022-08-30 08:06:31 发布

阅读量2k

点赞数 1

分类专栏： JavaScript 小练习文章标签： JS实现百度搜索下拉框百度搜索下拉框

本文链接：https://blog.csdn.net/hohocj/article/details/102774916

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

小练习

10 篇文章 0 订阅

订阅专栏

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度搜索</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.dv{
				width: 161px;
				background-color: rgb(255, 250, 232);
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="" value="" onkeyup="getNum(this)" placeholder="请输入字母"/>
		<script type="text/javascript">
			var arr=["a","ab","abc","b","bss","cs","fd","re","ds","grtg"];
			var main=document.body;
			function getNum(ele){
				if(document.querySelector(".dv")){//在开始创建之前先检察
					main.removeChild(document.querySelector(".dv"));
				}
				var str=ele.value;
				var tempArr=[];//创建临时数组
				for(var i=0;i<arr.length;i++){
					if(arr[i].indexOf(str)==0){
						tempArr.push(arr[i]);//如果相同,就保存在临时数组中
					}
				}
				// if(str.length==0||tempArr.length==0){
				// 	if(document.querySelector(".dv")){
				// 		main.removeChild(document.querySelector(".dv"));
				// 	}
				// 	return;
				// }
				//创建下拉框
				if(tempArr.length!=0){
					var div=document.createElement("div");
					main.appendChild(div);//加入到页面中
					div.className="dv";
					for(var j=0;j<tempArr.length;j++){
						var p=document.createElement("p");
						div.appendChild(p);
						p.innerText=tempArr[j];
					}
				}
				//再判断=====>或者是将这个位置加到创建下拉框之前,然后在if后面添加返回值return;
				if(str.length==0||tempArr.length==0){
					if(document.querySelector(".dv")){
						main.removeChild(document.querySelector(".dv"));
					}
				}
			}
		</script>
	</body>
</html>