ajax控制文本框输入内容,JQuery+AJAX实现搜索文本框的输入提示功能(续)

好久没有上来写东西了，今天上午写了一篇()，当时也是刚做好，还有部分功能没有实现，现在将基本已全部实现的代码贴出。主要就是加了上下光标键的事件。

其他的代码都没有变动，就是在原先的基础上添加了几行。JQuery真的是很强大！

更新代码如下：

$(document).ready(function(){

$("#search").keyup(function(event){

if((event.keyCode>=48 && event.keyCode<=57) || (event.keyCode>=96 && event.keyCode<=105) || (event.keyCode>=65 && event.keyCode<=90) || event.keyCode==8){

$.ajax({

type:"GET",

",

data:"txt_search="+escape($("#search").val()),

success:function(data){

if(data != ""){

var ss;

ss = data.split("@");

var layer;

layer = "

for(var i=0;i

layer += "

"+ss[i]+"";

}

layer += "

";

$("#searchresult").empty();

$("#searchresult").append(layer);

$(".line:first").addClass("hover");

$("#searchresult").css("display","");

$(".line").hover(function(){

$(".line").removeClass("hover");

$(this).addClass("hover");

},function(){

$(this).removeClass("hover");

});

$(".line").click(function(){

$("#search").val($(this).text());

});

}else{

$("#searchresult").empty();

$("#searchresult").css("display","none");

}

},

error:function(){alert("O No~~~");}

});

}

else if(event.keyCode == 38){

$("#aa tr.hover").prev().addClass("hover");

$("#aa tr.hover").next().removeClass("hover");

$("#search").val($("#aa tr.hover").text());

}else if(event.keyCode == 40){

$("#aa tr.hover").next().addClass("hover");

$("#aa tr.hover").prev().removeClass("hover");

$("#search").val($("#aa tr.hover").text());

}

});

});

$(document).ready(function(){

$().click(function(){

$("#searchresult").empty();

$("#searchresult").css("display","none");

});

});

PS: 键盘监听事件里面的event必须作为参数传递进去，所以要写成$("#search").keyup(function(event){...});而在IE浏览器下可以留空，如$("#search").keyup(function(){...}); 因为在IE下，event属于全局变量，是window.event，所以可以不用传递进去。

PS:上述代码还有一个问题没有解决，就是当浏览器窗体大小改变的时候，提示框并不会自适应的跟着改变位置，也就是说会错位。那是因为提示框使用是绝对定位，而且一开始的时候就把Left和Top属性给定死了，所以一旦窗体大小改变，提示框自然就不在搜索输入框的正下方了。解决的方法是动态的获取准确坐标，然后只要窗体大小改变就触发这个事件来动态的重新给定Left和Top的值。增加一个更改坐标的函数如下：

function ChangeCoords(){

var left = $("#search")[0].offsetLeft;//获取距离最左端的距离，像素，整型

var top = $("#search")[0].offsetTop+26;//获取距离最顶端的距离，像素，整型(26为搜索输入框的高度)

$("#searchresult").css("left",left+"px");//重新定义CSS属性

$("#searchresult").css("top",top+"px");//同上

}

窗体的大小改变会触发resize()事件，只需在该事件内调用ChangeCoords()方法即可。

$(window).resize(ChangeCoords);

另外在顶部的CSS设置中需要将Left:616px; Top:180px;先去掉。然后在键盘监听事件里也加一行调用ChangeCoords()；

因为刚加载完毕时$("#searchresult")这个DIV的CSS属性里已经没有Left和Top的属性了，所以第一次弹出提示框肯定会错位，也就是每次触发keyup事件也需要重新定义坐标。