AJAX实现类似百度的搜索提示，自动补全和键盘、鼠标操作

<script type="text/javascript">
$(document).ready(function(){
var highlightIndex = -1;
$("#name").bind("keyup", function(event){
document.getElementById("auto").style.display='block';
var keyCode = event.keyCode;
$("#log").html(keyCode);
if(keyCode >= 65 && keyCode <=90 || keyCode == 8 || keyCode == 46 || keyCode==32){
//输入字母,退格或删除,显示最新的内容
var enteredName = $("#name").val();
if(typeof(enteredName) == undefined ||
enteredName==""){
return ;
}
$.ajax({
type: 'post',
url : '/ajax/ajax_building_listNames.action',
data:{'enteredName':enteredName},
success : function(data) {
$("#auto").html("");
if(data && data.length > 0){
var autoNode = $("#auto");
for(var i = 0; i < data.length; i++){
var newNode = $("<div>").attr("id", i);
newNode.html(data[i]).appendTo(autoNode);
newNode.mouseover(function(){
$(this).css("background-color","gray");
highlightIndex = $(this).attr("id");
//alert(highlightIndex);
});
newNode.mouseout(function(){
$(this).css("background-color","white");
});
newNode.click(function(){
$("#name").attr("value", $(this).text());
hightlightIndex = -1;
document.getElementById("auto").style.display='none';

});
};
}
}
});
}else if(keyCode == 13){
if(highlightIndex != -1){
var selectNode = $("#auto").children("div").eq(highlightIndex);
if(selectNode){
$("#name").attr("value", $(selectNode).text());
document.getElementById("auto").style.display='none';
}
}

}else if(keyCode == 40 || keyCode == 38){
if(keyCode == 40){
//如果是向下
var autoNodes = $("#auto").children("div");
if(highlightIndex != -1){
//对当前选中的下一项的操作
var selectNode = autoNodes.eq(highlightIndex+1);
if(selectNode){
$("#name").attr("value", $(selectNode).text());
//改变当前高亮的索引值,让当前选中高亮
selectNode.css("background-color","gray");
//当前被选中去掉高亮
var selectNode = autoNodes.eq(highlightIndex);
selectNode.css("background-color","white");
}
}else if(highlightIndex == -1){
var selectNode = autoNodes.eq(highlightIndex+1);
selectNode.css("background-color","gray");
}
highlightIndex++;

if(highlightIndex==autoNodes.length){
//如果索引值等于提示框中内容的数组长度,则指向最头一个元素
autoNodes.eq(highlightIndex).css("background-color","white");
highlightIndex = 0;
autoNodes.eq(highlightIndex).css("background-color","gray");
$("#name").attr("value", autoNodes.eq(highlightIndex).text());

}

}
if(keyCode == 38){
//如果是向上
var autoNodes = $("#auto").children("div");
if(highlightIndex != -1){
//对当前选中的上一项的操作
var selectNode = autoNodes.eq(highlightIndex-1);
if(selectNode){
$("#name").attr("value", $(selectNode).text());
//改变当前高亮的索引值,让当前选中高亮
selectNode.css("background-color","gray");
//当前被选中去掉高亮
var selectNode = autoNodes.eq(highlightIndex);
selectNode.css("background-color","white");
}
highlightIndex--;
}else if(highlightIndex == -1){
//如果索引值为-1,则指向最后一个元素
highlightIndex = autoNodes.length-1;
autoNodes.eq(highlightIndex).css("background-color","gray");
}
}
}
});

//隐藏自动补全框,并定义css属性
$("#auto").css("position","absolute")
.css("z-index", 9999)
.css("background-color", "white")
.css("border","1px black solid")
.css("top",$("#name").offset().top + $("#name").height() + 5 + "px")
.css("left",$("#name").offset().left + "px")
.width($("#name").width() + 2);
});

}

});

</script>