文件名称:防google自动补齐
文件大小:4KB
文件格式:JS
更新时间:2014-04-09 15:30:40
自动补齐 防google自动补齐,异步调用数据 $(document).ready(function(){ //表示当前高亮的节点 highlightindex = -1; var timeoutId; var wordInput = $("#word"); var wordInputOffset = wordInput.offset(); $("#auto").hide().css("border","1px black solid").css("position","absolute").css("background-color","white") .css("top",wordInputOffset.top+wordInput.height() + 13 +"px") .css("left",wordInputOffset.left).width(wordInput.width() + 5); //控件1自动补全 wordInput.keyup(function(event){ //处理文本框的键盘事件 var myEvent = event||window.event; var keyCode = myEvent.keyCode; //对输入字符的判断 if((keyCode >= 65 && keyCode<=90) || (keyCode >= 48 && keyCode <= 57)||(keyCode>=96 && keyCode<=105) || keyCode ==46 || keyCode == 8 || keyCode == 32){ var wordText = $("#word").val(); var autoNode = $("#auto"); if(wordText!=""){ //把文本框的字符传到服务器端 //清除上次未完成的延时 clearTimeout(timeoutId); timeoutId = setTimeout(function(){ $.post("/wght/wght/bargain/searchIndex.do?word="+wordText,function(data){ //将dom对象data转换为jquery数据 var jqueryObj = $(data); //找到所有word节点 var wordNodes = jqueryObj.find("word"); autoNode.html(""); //遍历word,将起放入对话框中 wordNodes.each(function(i){ //取单词内容, var wordNode = $(this).text(); //新建div节点,将单词内容放到节点里,将节点放置页面 if(wordNode != null){ $("
").css("font-size","13px").css("height","18px").css("padding-top","1px").html(wordNode).appendTo(autoNode);
}
var completesVal=$("#auto").children("div");
var newDivNode =$("
").attr("id",i);
//新增鼠标进入事件,高亮显示
completesVal.mouseover(function(){
if(highlightindex != -1){
$("#auto").children("div").eq(highlightindex).css("background-color","white");
}
highlightindex = $(this).attr("id");
$(this).css("background-color","yellow");
});
//新增鼠标移出事件,取消高亮
completesVal.mouseout(function(){
$(this).css("background-color","white");
});
//鼠标单击事件,补全其内容
completesVal.click(function(){
var comText = $(this).text();
$("#auto").hide();
highlightindex=-1;
$("#word").val(comText);
});
});
//如果有数据,显示之
if(wordNodes.length > 0){
autoNode.show();
}else {
autoNode.hide();
highlightindex=-1;
}
},"xml");
},500);
}else{
autoNode.hide();
highlightindex=-1;
}
}else if(keyCode == 38 || keyCode==40){
//如果输入的是向上38向下40按键
if(keyCode == 38){
//up
var autoNodes = $("#auto").children("div");
if(highlightindex !=-1)
{
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
}else{
highlightindex = autoNodes.length -1;
}
if(highlightindex == -1){
//如果修改索引值以后index变成-1,则将索引中指向最后一个元素
highlightindex = autoNodes.length -1;
}
//让现在被高亮的内容变成黄色
autoNodes.eq(highlightindex).css("background-color","yellow");
}if(keyCode == 40){
//down
var autoNodes =$("#auto").children("div");
if(highlightindex !=-1)
{
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if(highlightindex == -1){
//如果修改索引值以后index变成-1,则将索引中指向最后一个元素
highlightindex = 0;
}
//让现在被高亮的内容变成黄色
autoNodes.eq(highlightindex).css("background-color","yellow");
}
}else if(keyCode == 13){
if(highlightindex !=-1)
{
var comText =$("#auto").hide().children("div").eq(highlightindex).text();
highlightindex=-1;
$("#word").val(comText);//将文本框内容改成选中项
//$("form:first").submit(); //提交form。若没有这句话,按下回车后,仅仅只改变了文本框里的内容,但是由于form本身就监控了回车按键默认为submit,提交的是文本框改变之前的内容,解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容,此时,提交的内容就是选中项。
}else{
$("#auto").hide();
//让文本框失去焦点
$("#word").get(0).blur();
}
}
});
})