很常见的搜索框，很常用，总结一下，怕自己忘了,使用的是原生的js。
这是原生写的，代码很简单，重要是思路。主要就是用了一个indexOf()，很简单。越简单的东西越难想到，很多人都会想到用正则去做，这样就舍近求远了。
html部分：
<div id="box">
<input type="text" id="txt" value = "">
<input type="button" id="btn" value="搜索">
</div>
javascript部分：
//创建假数据 var array=["aaa","abc","aab","acc","bcc","caa"]; //获取文本框注册keyup事件 document.getElementById(‘txt‘).onkeyup=function(){ var divBox = document.getElementById(‘box‘); //临时数组 var tmpArray = []; //获取数据源中的每一条数据 for(var i=0;i<array.length;i++){ //找到以你输入的内容为开头的所有数据 if(array[i].indexOf(this.value) === 0){ //将找到的数据push到临时数组中 tmpArray.push(array[i]); } } //临时数组为空时，不新建显示框 if(tmpArray.length === 0){return;} //如果搜索框没有值时也不新建显示框 if(this.value.length === 0){ //如果此时已经有了显示框，应该除去 if(document.getElementById("pop")){ divBox.removeChild(document.getElementById("pop")); } return; } //临时数组有数据 var dvObj = document.creatElement("div"); dvObj.id = "pop"; //将div添加到box中 divBox.appendChild(dvObj); var ulObj=document.createElement("ul"); //将ul添加到dvObj中 dvObj.appendChild(ulObj); //遍历临时数组，动态创建li for(var i = 0;i<tmpArray.length;i++){ var trObj = document.createElement("tr"); //将tr添加到ulObj中 ulObj.appendChild(liObj); //将临时数组中的数据添加到li中 setinnerText(liObj,tmpArray[i]); } }
css的样式没有写肯定会有问题，只能留给你们了，都写完了，就没意思了。我是一个喜欢留坑的人。
原文：http://www.cnblogs.com/ryze/p/ryze03.html