模拟百度搜索框
我的思路整理：
1. 注册文本框抬起事件(onkeyup)
2. 处理函数：
--->创建临时数组，循环遍历文本框键入的文字内容和keywords数组，用keyWords[i].indexOf(text) == 0 来判断，true就追加进临时数组tempArr.push(keyWords[i])
--->bug修复：每一次键盘抬起，都判断页面有没有div，有就删除
--->何时出现div：判断条件：当文本框为空，或临时数字空，不创建div，如果有div，就删除
--->创建div, div加到box, div设置样式 ; 循环遍历创建p，p加入新建的div；加入鼠标进入和移开的样式（在循环里面，用命名函数，减少负荷）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { 450px; margin: 200px auto; } #txt { 350px; } </style> </head> <body> <div id="box"> <input type="text" id="txt" value=""> <input type="button" value="搜索" id="btn"> </div> <script src="common.js"></script> <script> var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"]; //获取文本框注册键盘抬起事件 my$("txt").onkeyup = function () { //每一次键盘抬起，都判断页面有没有div if (my$("dv")) { //删除一次 my$("box").removeChild(my$("dv")); } //输入的内容，即文本框里面的内容，和keywords去对比 //获取文本框输入的内容 var text = this.value; //临时数组--空数组------->存放对应上的数据 var tempArr = []; //把文本框输入的内容和数组中的每个数据对比 for (var i = 0; i < keyWords.length; i++) { //是否是最开始出现的 if (keyWords[i].indexOf(text) == 0) { tempArr.push(keyWords[i]);//追加进tempArr } } //如果文本框为空，且临时数组为空，不创建div if (this.value.length == 0 || tempArr.length == 0) { //如果页面有div，删除div if (my$("dv")) { my$("box").removeChild(my$("dv")); } return; } //创建div 把div加入到名为box的div里面 var dvObj = document.createElement("div"); my$("box").appendChild(dvObj); dvObj.id = "dv"; dvObj.style.width = "350px"; dvObj.style.border = "1px solid pink"; //循环遍历临时数组，创建对应的P标签 for (var i = 0; i < tempArr.length; i++) { var pObj = document.createElement("p"); //把p加到div里面 dvObj.appendChild(pObj); setInnerText(pObj, tempArr[i]); pObj.style.margin = 0; pObj.style.padding = 0; pObj.style.cursor = "pointer"; pObj.style.marginTop = "5px"; pObj.style.marginLeft = "5px"; //鼠标进入 pObj.onmouseover = mouseoverHandle; //鼠标离开 pObj.onmouseout = mouseoutHandle; } function mouseoverHandle() { this.style.backgroundColor = "yellow"; } function mouseoutHandle() { this.style.backgroundColor = ""; } }; </script> </body> </html>