仿百度搜索框自动补充搜索内容实现过程：
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.实现效果：
