好几天没有写文章了，今天想起了百度搜索框的实现，所以就来说一下这个吧
css代码： <style>#box {width: 450px;margin: 200px auto;}#txt {width: 350px;}</style>html代码：
<div id="box"><input type="text" name="" id="txt" /><input type="button" value="搜索" id="btn" /></div>js代码：
var keyWords = ["我喜欢孤独的天才", "孤独的天才是我", "我爱的人很多", "程序员的惨淡人生", "什么叫帅", "我现在就很特别"];//要出现在搜索框下面的提示文字document.getElementById("txt").onkeyup = function() {//定义键盘抬起事件进行追踪if(document.getElementById("dv")){//每次按下抬起时都要先清除一下div以免乜有数据时扔存在div边框document.getElementById("box").removeChild(document.getElementById("dv"));}var tempArr = [];//定义临时数组用来存储用户与之相匹配的句子var text = this.value;//获取用户所输入的文本框内容for(var i = 0; i < keyWords.length; i++) {if(keyWords[i].indexOf(text) == 0) {//将用户输入的文本框内容与数组进行比对，输入内容在数组中匹配到，并且开头的值存入临时数组中tempArr.push(keyWords[i]);}}console.log(tempArr);var dvObj = document.createElement("div");//创建一个div用来放提示的语句document.getElementById("box").appendChild(dvObj);dvObj.id="dv";dvObj.style.width = "350px";dvObj.style.border = "1px solid green";if(this.value.length==0||tempArr.length==0){//当文本框中乜有内容或者临时数组中没有元素是将div进行删除if(document.getElementById("dv")){document.getElementById("box").removeChild(document.getElementById("dv"));}//return;}for(var i=0;i<tempArr.length;i++){//创建临时数组长度个的p元素用来显示提示的语句var pObj=document.createElement("p");dvObj.appendChild(pObj);pObj.style.margin="0";pObj.style.padding="0";pObj.style.marginTop="5px";pObj.style.marginLeft="5px";pObj.style.cursor="pointer";pObj.innerHTML=tempArr[i];pObj.function(){this.style.backgroundColor="yellow";}pObj.function(){this.style.backgroundColor="";}}}运行结果：