jquery自动补全插件

<script src="jquery-1.3.2.js"></script>
<style>*{font-size:12px;}</style>
<script>
var index = -1;
$.fn.extend({
 ajaxtips:function(param){
       var key = {down:40,up:38,enter:13,esc:27}; //键值
       var rs = param.resultSet.split(","); //结果集
       var text = $("#"+param.textid); //文本对象
       var os = text.position();
       $("#tipsdiv").remove(); //清除div对象
       text.after("<div id='tipsdiv'></div>");
       var paterdiv = $("#tipsdiv");
       var divwidth = text.outerWidth(true);
       paterdiv.css({
             background : "#fff",
             position : "absolute",
             left : os.left+"px",
             border : "1px solid #000",
             width : divwidth+"px",
             top : text.outerHeight(true) + os.top-1+ "px"
      });
      $.each(rs,function(i,n){
             var value ="<div style='word-break:break-all;overflow:hidden;' id=tipsdiv"+i; //设置样式,自动换行
             value += " onmouseover =index="+i+";$('#tipsdiv').children().css({'background':'#fff','color':'#000'});"
             value += "$(this).css({'background':'#3165CE','color':'#fff'});";
             value += " onmouseout =$(this).css({'background':'#fff','color':'#000'});";
             value += " onclick = $('#tipsdiv').css('display','none');$('#"+param.textid+"').val($(this).text());> ";
             value += "<span style='margin-left:2px'>"+ n + "</span></div>";
             $("#tipsdiv").append(value);
     });
     var lenght = rs.length;
     var out = $('#tipsdiv'+index).trigger("onmouseout");
     switch(window_event().keyCode){
              case key.up :
                    if(index <= 0) index = lenght ;
                    var divup = $('#tipsdiv'+(index-1));
                    out;
                    divup.trigger("onmouseover");
                    text.val(divup.text());
                    break;
              case key.down :
                    if(index >= lenght-1) index = -1;
                    var divdown = $('#tipsdiv'+(1+index));
                    out;
                    divdown.trigger("onmouseover");
                    text.val(divdown.text());
                    break;
              case key.enter :
              case key.esc: paterdiv.css("display","none");
        };
    }
})(jQuery);
//firefox||ie下获取event(事件的状态)
function window_event(){
    if(document.all){
        return window.event;
    }
    var caller = window_event.caller;
    while(caller!=null){
        var argument = caller.arguments[0];
        if(argument){
            var temp = argument.constructor;
            if(temp.toString().indexOf("Event")!=-1){
                return argument;
            }
        }
        caller = caller.caller;
    }
    return null;
}

$(document).ready(function(){
   $('#text').keyup(function(){
      $(this).ajaxtips({
          resultSet:"a1,a2,a3,a4sssssssssssssssssssssssssssssssssssssssssss",
          textid:"text"
      });
   });
});
</script>
<input id="text" type="text" /><br/>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值