<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>百度搜索框</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 400px;
margin: 200px auto;
/*border: 1px solid #000;*/
}
#txtSearch {
width: 300px;
}
#pop {
width: 300px;
border: 1px solid red;
padding: 0px;
}
#pop ul {
list-style-type: none;
margin: 5px;
padding: 0px;
}
</style>
</head>
<body>
<div id="box">
<input type="text" value="" id="txtSearch"/>
<input type="button" value="搜索" id="btnSearch"/>
<!--<div id="pop">-->
<!--<ul>-->
<!--<li>a</li>-->
<!--<li>ab</li>-->
<!--<li>abc</li>-->
<!--<li>abcd</li>-->
<!--<li>abcde</li>-->
<!--<li>amm</li>-->
<!--</ul>-->
<!--</div>-->
</div>
</body>
</html>
<script src="common.js"></script>
<script>
// 当我们在输入框中键盘按下，并抬起的时候，就会向服务器发送一条ajax请求,去服务器的数据库中查询以用户输入的内容为开头的数据，如果找到了，则将这些数据返回给浏览器，渲染到指定的位置
// 用本地数组模拟一下数据库
var strs =["a","ab","abc","abcd","abcde","acc","amm","mmm","kkk"];
// 1. 获取要操作的对象
var box = $$("box");
var txtSearch = $$("txtSearch");
// 2. 给事件源注册事件
txtSearch.onkeyup = function (){
// 3.先获取一下输入框中的数据
var value = txtSearch.value;
// 4. 到数据库中查询，数组中的哪些元素是以用户输入的内容为开头的数据，如果找到了，就需要存到一个新的数组当中
var filterArr = []; // filter过滤
for(var i = 0; i < strs.length; i++) {
// 如果当前的数据在数组中的元素当中的索引位置是0的话，就可以把数组当中的这个元素，看成是以用户输入的内容为开头的数据
// strs[i]是数组中的遍历到的每一项，是一个字符串，然后判断这个字符串是不是以用户输入的内容为开头的数据
if(strs[i].indexOf(value)==0){
filterArr.push(strs[i]);
}
}
//11. 在生成新的盒子之前先把旧的盒子清除掉
var divPop = $$("pop");
if(divPop){
box.removeChild(divPop);
}
//12.如果过滤数组中的元素为空的话，就不要往下执行，就是说不要再创建div和ul
if(!filterArr.length){
return;// 退出函数，下面的代码都不会执行
}
//13.如果输入框里面的内容为空的话，不用再往下执行代码，不需要创建元素
if(!value){
return; //退出函数
}
// 循环遍历完数组之后,filterArr里面就存了以用户输入的内容为开头的数据
//5. 动态的创建元素，首先创建div
divPop = document.createElement("div");
divPop.setAttribute("id","pop");
box.appendChild(divPop);
// 6. 创建ul
var ul = document.createElement("ul");
divPop.appendChild(ul);
// 7. 创建li标签 ，要根据filterArr数组中的元素的个数创建对应的li标签
for(var i = 0; i < filterArr.length; i++) {
var li = document.createElement("li");
Txt.setText(li,filterArr[i]); // 给每个li标签添加文本内容
ul.appendChild(li); // 将li标签添加到ul中
//8. 给每个li标签添加鼠标移入的事件，让当前行的背景颜色变成灰色
li.onmouseover = function (){
this.style.backgroundColor = "#d0d0d0";
}
//9. 鼠标离开的时候，要还原原来的颜色
li.onmouseout = function (){
this.style.backgroundColor = "#fff";
}
// 10. 选中当前行的时候，要让当前行的内容填充在输入框中，盒子不要了
li.onclick = function (){
txtSearch.value = Txt.getText(this);
box.removeChild(divPop);
}
}
}
// 1. 键盘按下并抬起的时候，获得用户输入的数据
// 2. 拿着用户输入的数据，去数据库搜索以用户输入的内容为开头的数据
// 3. 找到以用户输入的内容为开头的数据，存入新的容器中
// 4. 根据匹配到的数据(根据新数组的长度，来动态的生成列表中的li)，动态的生成列表
// 5. 判断特殊情况
</script>
网友评论