仿百度搜索框自动补充搜索内容实现过程：

1.设置图片和搜索框两个div

<div id="img">
	<img src="img/baidu.png">
</div>
<div id="box">
	<input type="text" id="textSearch">
	<input type="button" value="百度一下" id="buttonSearch">
</div>

2.图片和搜索框的css样式：

    fieldset,input,button,img{
		border: none;
		padding: 0px;
		margin: 0px;
		outline-style: none;
	}

	ul,ol{
		list-style: none;
		margin: 0px;
		padding: 0px;
	}

	#img{
		width: 405px;
		height: 200px;
		margin: 0 490px;
		margin-top: 100px;
	}

	#box{
		width: 405px;
		margin: 300px auto;
		margin-top: 100px;
		position: relative;
	}

	#textSearch{
		float: left;
		width: 300px;
		height: 32px;
		padding-left: 4px;
		border: 1px solid #b6b6b6;
		border-right: 0;
	}

	#buttonSearch{
		float: left;
		width: 100px;
		height: 34px;
		font: 400 14px/34px "雅黑";
		color: white;
		background: #3385ff;
		cursor: pointer;
	}

	#buttonSearch:hover{
		background: #317ef3;
	}

	#pop {
        width: 303px;
        border: 1px solid #ccc;
        padding: 0px;
        position: absolute;
        top: 34px;
    }


    #pop ul li {
        padding-left: 5px;
    }


    #pop ul li:hover {
        background-color: #CCC;
    }

3.JS实现搜索自动补充：

	//获取对象
	var box = document.getElementById("box");
	var text = document.getElementById("textSearch");
	//模拟从后台获取到数据
	var datas = ["a","ab","abc","abcd","mdzz","abcdefg"];
	//用户输入时从datas中寻找符合要求的项目存放到一个新数组中
	text.onkeyup = function () {
		//获取当前文本框中的内容
		var val = this.value;
		//从datas中寻找符合要求的项目存放到一个新的数组中
		var filterArr = [];
		//遍历datas里的每一项，判断是否符合要求，如果符合要求datas中
		for (var i = 0; i < datas.length; i++) {
			var data = datas[i];
			//判断每一个data是否以当前的val开头
			if (data.indexOf(val) == 0)  {  //如果符合要求
				filterArr.push(data);
			}
		}
		console.log(filterArr);
	//根据匹配数组创建结构之前判断一下页面上是否已经存在pop
	var popDiv = document.getElementById("pop");
        if (popDiv) {
            //如果进来了说明已经有了就要把他清除
            box.removeChild(popDiv);
        }
        //如果没有匹配项 就不要创建pop
        if (filterArr.length === 0) {
            return;
        }
        //如果是空字符串 就不创建了
        //if(val.length===0)
        if (val === "") {
            return;
        }
        //根据数组创建结构
        var popDiv = document.createElement("div");
        popDiv.id = "pop";
        box.appendChild(popDiv);
        var ul = document.createElement("ul");
        popDiv.appendChild(ul);
        //根据过滤后的数组中的每一项数据创建li
        for (var i = 0; i < filterArr.length; i++) {
            //filterArr[i];//每一项数据
            var li = document.createElement("li");
            ul.appendChild(li);
            li.innerText = filterArr[i];
        }
    };

4.具体实现代码：

<!DOCTYPE html>
<html>
<head>
	<title>仿百度搜索框</title>
	<style>
		fieldset,input,button,img{
			border: none;
			padding: 0px;
			margin: 0px;
			outline-style: none;
		}

		ul,ol{
			list-style: none;
			margin: 0px;
			padding: 0px;
		}

		#img{
			width: 405px;
			height: 200px;
			margin: 0 490px;
			margin-top: 100px;
		}

		#box{
			width: 405px;
			margin: 300px auto;
			margin-top: 100px;
			position: relative;
		}

		#textSearch{
			float: left;
			width: 300px;
			height: 32px;
			padding-left: 4px;
			border: 1px solid #b6b6b6;
			border-right: 0;
		}

		#buttonSearch{
			float: left;
			width: 100px;
			height: 34px;
			font: 400 14px/34px "雅黑";
			color: white;
			background: #3385ff;
			cursor: pointer;
		}

		#buttonSearch:hover{
			background: #317ef3;
		}

		#pop {
            width: 303px;
            border: 1px solid #ccc;
            padding: 0px;
            position: absolute;
            top: 34px;
        }


        #pop ul li {
            padding-left: 5px;
        }


        #pop ul li:hover {
            background-color: #CCC;
        }
	</style>
</head>
<body>
	<div id="img">
		<img src="img/baidu.png">
	</div>
	<div id="box">
		<input type="text" id="textSearch">
		<input type="button" value="百度一下" id="buttonSearch">
	</div>

	<script>
	//获取对象
	var box = document.getElementById("box");
	var text = document.getElementById("textSearch");
	//模拟从后台获取到数据
	var datas = ["a","ab","abc","abcd","mdzz","abcdefg"];
	//用户输入时从datas中寻找符合要求的项目存放到一个新数组中
	text.onkeyup = function () {
		//获取当前文本框中的内容
		var val = this.value;
		//从datas中寻找符合要求的项目存放到一个新的数组中
		var filterArr = [];
		//遍历datas里的每一项，判断是否符合要求，如果符合要求datas中
		for (var i = 0; i < datas.length; i++) {
			var data = datas[i];
			//判断每一个data是否以当前的val开头
			if (data.indexOf(val) == 0)  {  //如果符合要求
				filterArr.push(data);
			}
		}
		console.log(filterArr);
	//根据匹配数组创建结构之前判断一下页面上是否已经存在pop
	var popDiv = document.getElementById("pop");
        if (popDiv) {
            //如果进来了说明已经有了就要把他清除
            box.removeChild(popDiv);
        }
        //如果没有匹配项 就不要创建pop
        if (filterArr.length === 0) {
            return;
        }
        //如果是空字符串 就不创建了
        //if(val.length===0)
        if (val === "") {
            return;
        }
        //根据数组创建结构
        var popDiv = document.createElement("div");
        popDiv.id = "pop";
        box.appendChild(popDiv);
        var ul = document.createElement("ul");
        popDiv.appendChild(ul);
        //根据过滤后的数组中的每一项数据创建li
        for (var i = 0; i < filterArr.length; i++) {
            //filterArr[i];//每一项数据
            var li = document.createElement("li");
            ul.appendChild(li);
            li.innerText = filterArr[i];
        }
    };
	</script>
</body>
</html>

5.实现效果：

仿百度搜索框

仿百度搜索框自动补充搜索内容实现过程：

猜你喜欢