1.测试dome
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src="https://project.dabby.cn/javascripts/jquery-1.11.1-ui-1.11.0-ujs-3.1.4.js" type="text/javascript"></script>
<style>
li{
margin-left: -40px;
}
.li1{
background-color: aqua;
}
</style>
<body>
<h1>自动补全</h1>
<div style="margin: auto;width: 400px;">
<input type="text" id="name" size="60" autocomplete="off" />
<ul id="ul1" style="border: 1px solid red;display: none;width: 338px;list-style: none;margin-top: 0px;">
</ul>
</div>
</body>
</html>js---------------
<script>
//获取结果集，循环填充li
var items=["aaa","abc","bac","bab","dda","ddb","cddd","ssa","xxb"];
var index=0;
$(function(){
var temp=new Array();
$("#name").bind("keyup",function(event){
if(event.keyCode!=38&&event.keyCode!=40)
index=0;
temp=new Array();
for(var i=0;i<items.length;i++){
if(items[i].indexOf(this.value)>=0)
temp[temp.length]=items[i];
}
//控制li的显示和隐藏
if(!($(this).val()==""||temp.length==0)){
$("#ul1").show();
$("#ul1").html("");
for (var j=0;j<temp.length;j++) {
$("#ul1").append("<li id='li"+j+"' index='"+j+"'>"+temp[j]+"</li>");
}
}else{
$("#ul1").html("");
$("#ul1").hide();
}
//鼠标监听
if(temp.length>0){
if(event.keyCode==38)
index=index==0?temp.length-1:index-1;
if(event.keyCode==40)
index=index==temp.length-1?0:index+1;
if(event.keyCode==13){
var a1=$("#li"+index).html()
$("#name").val(a1)
$("#ul1").hide();
}
}
$("li").removeClass("li1")
$("#li"+index).addClass("li1")
});
//数据填充
$("#ul1").delegate("li","click",function(){
$("#name").val(this.innerHTML);
$("#ul1").hide();
});
})
</script>