当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery自动补全插件

发表于: 2010-07-10   作者:cowry   来源:转载   浏览:
摘要: <script src="jquery-1.3.2.js"></script><style>*{font-size:12px;}</style><script>var index = -1;$.fn.extend({ ajaxtips:function(param){   &nb

<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/>

jquery自动补全插件

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号