最近学习了一个百度搜索框的案例，想记录下来，下面来说说具体功能如何实现 需求： 1.当在输入框输入时，每输入一个字，就会在下方展示相关内容列表 2.每一次输入框输入，清空上一次输入内容 3.鼠标移入列表内容时，对应的内容高亮显示，移出时回复原装 4.鼠标点击内容时，将列表内容显示到文本框，清空列表
HTML页面结构和CSS样式部分代码，有点简陋。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ padding-top: 100px; text-align: center; } </style> </head> <body> <input type="text" id="txt"> <button id="btn">百度一下</button> <div id="box"></div>下面是js代码
<script> //1.首先，准备数据 var keyWords=["打篮球","打游戏","听歌","看电影"]; //2.给文本框注册抬起事件 my$("txt").onkeyup=function () { var text=this.value; //存放能对应的数据 var arr=[]; //优化：每次键盘抬起判断页面中有没有div if(my$("dv")){ my$("box").removeChild(my$("dv")); } //通过循环判断值是不是最开始出现的，是就存放到临时数组里面去 for(var i=0;i<keyWords.length;i++){ if(keyWords[i].indexOf(text)==0){ arr.push(keyWords[i]); } } //优化：如果临时数组为空，文本框也为空，不需要创建div if(text.length==0||arr.length==0){ //判断是否存在 if(my$("dv")){ my$("box").removeChild(my$("dv")); } return; } //3.把对应的数据显示到页面 var box=document.createElement("div"); console.log(box); box.id="dv"; my$("box").appendChild(box); box.style.width="175px"; box.style.textAlign="center"; box.style.marginLeft="550px"; box.style.border="1px solid green"; box.style.cursor="pointer"; for(var i=0;i<arr.length;i++){ var pObj=document.createElement("p"); box.appendChild(pObj); pObj.innerText=arr[i]; //鼠标移入移出高亮显示 //鼠标移入 pObj.onmouseover=function () { this.style.backgroundColor="pink"; } //鼠标移出 pObj.onmouseout=function () { this.style.backgroundColor=""; } //4.鼠标点击内容时，将列表内容显示到文本框，清空列表 pObj.onclick=function () { my$("txt").value=this.innerText; my$("box").removeChild(my$("dv")); } </script>效果图
