JQuery+AJAX实现搜索文本框的输入提示功能(续)

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

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

输入提示框

 

更新代码如下:

 

<script type="text/javascript" src="/js/jquery-1.3.pack.js"></script>
<script type="text/javascript">

$(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",
   url:"/include/ajax_search.php",
   data:"txt_search="+escape($('#search').val()),
   success:function(data){
   if(data != ""){
    var ss;
    ss = data.split("@");
    var layer;
    layer = "<table id='aa'>";
    for(var i=0;i<ss.length-1;i++){
     layer += "<tr class='line'><td class='std'>"+ss[i]+"</td></tr>";
    }
    layer += "</table>";
    $('#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");
 });
});
</script>

 

 

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事件也需要重新定义坐标。

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值