该例子实现的是用户输入信息或者字母时可以搜索出来，鼠标点击选择
1 <!DOCTYPE html> 2 <html> 3 <style> 4 p{ 5 width:200px; 6 height:2em; 7 padding:0; 8 margin:0; 9 background:#D4D4D4; 10 display:none; 11 border-bottom:1px solid black; 12 } 13 p:hover{ 14 background:#F7F7F7; 15 } 16 div{ 17 height:100px; 18 width:200px; 19 overflow-x:hidden; 20 } 21 </style> 22 <body > 23 <input type="text" id="input" onkeyup="query()" > 24 <div > 25 <p onclick="select(this)">js</p> 26 <p onclick="select(this)">wes</p> 27 <p onclick="select(this)">che</p> 28 <p onclick="select(this)">women</p> 29 <p onclick="select(this)">jswo</p> 30 </div> 31 <script> 32 function select(obj){ 33 var text = document.getElementById("input"); 34 text.value = obj.innerHTML; //实现选择 35 var p = document.getElementsByTagName("p"); 36 for(var i=0;i<p.length;i++){ 37 p[i].style.display="none"; //选择完以后隐藏 38 } 39 } 40 function query(){ 41 var p = document.getElementsByTagName("p"); 42 var text = document.getElementById("input"); 43 for(var i=0;i<p.length;i++){ 44 p[i].style.display="none"; 45 if(p[i].innerHTML.match(text.value)){ //匹配输入信息 46 p[i].style.display="block"; 47 } 48 } 49 } 50 51 </script> 52 </body> 53 </html>