php实现输入框下拉提示框,输入框自动下拉补全（仿百度、谷歌搜索框提示）

New Document

/*自动下拉补全 zhk */

var highlightindex=-1;//当前高亮的节点

$(document).ready(function(){

var wordInput=$("#word");

var wordInputOffset=wordInput.offset();

$("#auto").hide().css("border","1px black solid").css("position","absolute")

.css("top",wordInputOffset.top+wordInput.height()+5+"px")

.css("left",wordInputOffset.left+"px").width(wordInput.width()+2);

wordInput.keyup(function (event){

var myEvent=event||window.event;

var keyCode=myEvent.keyCode;

if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){

var wordText=$("#word").val();

var autoNode=$("#auto");

if(wordText!=""){

var wordNodes=$("span");

autoNode.html("");

wordNodes.each(function(i){

var wordNode=$(this);

var newDivNode=$("

").attr("id",i);

newDivNode.html(wordNode.text()).appendTo(autoNode);

newDivNode.mouseover(function(){//鼠标进入

if(highlightindex!=-1){

$("#auto").children("div").eq(highlightindex)

.css("background-color","white");

}

highlightindex=$(this).attr("id");

$(this).css("background-color","red");

})

newDivNode.mouseout(function(){//鼠标移除

$(this).css("background-color","white");

})

newDivNode.click(function(){//点击

var comText=$(this).text();

$("#auto").hide();

highlightindex=-1;

$("#word").val(comText);

})

})

if(wordNodes.length>0){

autoNode.show();

}else{

autoNode.hide();

highlightindex=-1;

}

}else{

autoNode.hide();

highlightindex=-1;

}

}else if(keyCode==38||keyCode==40){

if(keyCode==38){//向上

var autoNodes=$("#auto").children("div");

if(highlightindex!=-1){

autoNodes.eq(highlightindex).css("background-color","white");

highlightindex--;

}else{

highlightindex=autoNodes.length-1;

}

if(highlightindex==-1){

highlightindex=autoNodes.length-1;

}

autoNodes.eq(highlightindex).css("background-color","red");

}

if(keyCode==40){

var autoNodes=$("#auto").children("div");

if(highlightindex!=-1){

autoNodes.eq(highlightindex).css("background-color","white");

}

highlightindex++;

if(highlightindex==autoNodes.length){

highlightindex=0;

}

autoNodes.eq(highlightindex).css("background-color","red");

}

}else if(keyCode==13){

if(highlightindex!=-1){

var comText=$("#auto").hide().children("div").eq(highlightindex).text();

highlightindex=-1;

$("#word").val(comText);

}else{

alert("文本框中的【"+$("#word").val()+"】被提交了");

$("#auto").hide();

$("#word").get(0).blur();//失去焦点

}

}

});

$("input [type='button']").click(function(){

alert("文本框中的【"+$("#word").val()+"】被提交了");

});

})

aaa

abc

abd

bbc

beb

cer

erd

beg