//判断元素是否高亮，初始值为-1，表示未有元素高亮
var higthlight=-1;
var timeOutId;
$(document).ready(
function(){
//让div隐藏起来
var autoNode=$("#auto").css("border","2px gray none").height("200px").width("150px");
autoNode.hide();
var inputNode=$("#word");
//给文本框注册键盘事件
inputNode.keyup(
function(event){
//处理键盘事件
var myEvent =event||window.event;
var kcode=myEvent.keyCode;
if(kcode >= 65 && kcode <= 90 || kcode==8 || kcode==46){
//把文本框中的内容取到
var wordText=inputNode.val();
//把数据发送到服务器
if(wordText!=""){
//清除定时器id
clearTimeout(timeOutId);
//设定定时器，延迟500ms发送
timeOutId=setTimeout(
function(){
$.post("autoCompleteServlet",{word:wordText},
function(data){
//把数据转换成
jquery对象
var
jqueryDom=$(data);
//取所有的word节点
var wordNodes=
jqueryDom.find("word");
//清空div中的内容
autoNode.
html("");
//对word进行遍历
wordNodes.each(
function(i){
//取当前word
var wordNode=$(this);
//创建div节点
var crediv=$("<div>").css("cursor","pointer").attr("id",i);
//将内容加入div中
crediv.
html(wordNode.text());
//鼠标进入时高亮选中内容
crediv.mouseover(
function(){
if(higthlight!=-1){
$("#auto").children("div").eq(higthlight)
.css("background-color","white");
}
higthlight=$(this).attr("id");
$(this).css("background-color","gray");
});
crediv.mouseout(
function(){
$(this).css("background-color","white");
});
crediv.click(
function(){
var HightText=$(this).text();
higthlight==-1;
$("#word").val(HightText);
$("#auto").hide();
});
//将创建 的div加进去
autoNode.append(crediv);
});
//如果服务器有数据返回，则让div显示
if(wordNodes.length>0){
var offset=inputNode.offset();
autoNode.show().css("position","absolute").css("left",offset.left+(-2)+"px").css("top",offset.top+$("#word").height()+6+"px");
}else{
autoNode.hide();
//所有都隐藏了，也就没有高亮元素，恢复初始值
higthlight=-1;
}
},"xml");
},500);
}else{
autoNode.hide();
higthlight=-1;
}
}else if(kcode==38||kcode==40){
//如果输入的是向上(38)键或向下(40)键
//向上移动
if(kcode==38){
//取得auto的div元素下的所有div
var autoNodes=$("#auto").children("div");
if(higthlight!=-1){
//如果以前有元素被 高亮了，则将其它颜色改为白色
autoNodes.eq(higthlight).css("background-color","white");
higthlight--;
}else{
higthlight=autoNodes.length-1;
}
if(higthlight==-1){
higthlight=autoNodes.length-1;
}
autoNodes.eq(higthlight).css("background-color","gray");
}
if(kcode==40){
//向下移动
//取得auto的div元素下的所有div
var autoNodes=$("#auto").children("div");
if(higthlight!=-1){
//如果以前有元素被 高亮了，则将其它颜色改为白色
autoNodes.eq(higthlight).css("background-color","white");
}
higthlight++;
if(higthlight==autoNodes.length){
higthlight=0;
}
autoNodes.eq(higthlight).css("background-color","gray");
}
}else if(kcode==13){
//下拉框有高亮内容
if(higthlight!=-1){
var HightText=$("#auto").hide().children("div").eq(higthlight).text();
higthlight==-1;
$("#word").val(HightText);
}else{
//下拉框没有高亮内容
sub();
$("#auto").hide();
$("#word").get(0).blur();
}
}
});
//给button注册个事件
$("input[type='button']").click(sub);
});
function sub(){
alert("文本框中的["+$("#word").val()+"],被提交了");
}
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
