<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()); //改变当前高亮的索引值,"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); });原文链接:https://www.f2er.com/ajax/165462.html}}); </script>