该例子实现的是用户输入信息或者字母时可以搜索出来，鼠标点击选择
<!DOCTYPE html>
<html>
<style>
p{
width:200px;
height:2em;
padding:0;
margin:0;
background:#D4D4D4;
display:none;
border-bottom:1px solid black;
}
p:hover{
background:#F7F7F7;
}
div{
height:100px;
width:200px;
overflow-x:hidden;
}
</style>
<body >
<input type="text" id="input" onkeyup="query()" >
<div >
<p onclick="select(this)">js</p>
<p onclick="select(this)">wes</p>
<p onclick="select(this)">che</p>
<p onclick="select(this)">women</p>
<p onclick="select(this)">jswo</p>
</div>
<script>
function select(obj){
var text = document.getElementById("input");
text.value = obj.innerHTML; //实现选择
var p = document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].style.display="none"; //选择完以后隐藏
}
}
function query(){
var p = document.getElementsByTagName("p");
var text = document.getElementById("input");
for(var i=0;i<p.length;i++){
p[i].style.display="none";
if(p[i].innerHTML.match(text.value)){ //匹配输入信息
p[i].style.display="block";
}
}
} </script>
</body>
</html>