`

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

分享到:
评论

相关推荐

    高级jQuery自动补全插件

    **jQuery自动补全插件详解** 在Web开发中,用户界面的交互性和便捷性是提升用户体验的关键因素之一。其中,自动补全功能是一项常见的需求,它可以在用户输入时提供预测建议,大大加快输入速度,降低错误率。jQuery...

    jquery自动补全示例。包括后台,中文乱码解决JS

    **jQuery自动补全插件详解** jQuery 自动补全插件是一种常见的前端开发工具,它为用户在输入框中提供动态建议,提高了用户体验,尤其在处理大量数据输入时显得尤为重要。本示例将涵盖如何使用jQuery实现自动补全...

    jquery自动补全插件(jquery autocomplete)

    jQuery AutoComplete 是一个非常流行的前端插件,它为输入框提供了自动补全的功能,极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库,因此,使用前需要先引入 jQuery。AutoComplete 的主要功能是根据...

    jquery自动补全例子

    3. 配置选项:jQuery自动补全插件提供了丰富的配置选项,如`minLength`用于设置触发自动补全的最小字符数,`select`则是用户选择建议项时的回调函数,可以根据需要进行定制。 实际应用中,jQuery自动补全功能广泛...

    jQuery自动补全自动提示插件仿百度自动提示插件

    **jQuery自动补全插件详解:仿百度自动提示功能** 在网页开发中,为了提高用户体验,经常需要实现一种类似于搜索引擎的自动补全功能,让用户在输入框中输入内容时能够实时得到相关的建议或提示。jQuery作为一款广泛...

    jquery自动补全代码

    **jQuery自动补全插件详解** 在Web开发中,用户界面的交互性和便捷性是提升用户体验的关键因素之一。jQuery库以其简洁的API和强大的功能深受开发者喜爱,而jQuery的自动补全插件则是提高输入效率、优化用户体验的...

    jQuery 自动补全

    **jQuery 自动补全插件详解** 在网页开发中,为用户提供自动补全功能是一种常见的交互设计,可以提高用户体验,减少用户输入错误。jQuery 自动补全插件(jQuery UI Autocomplete)是实现这一功能的强大工具,它基于...

    jQuery百度搜索自动补全插件.zip

    jQuery百度搜索自动补全插件基于流行的JavaScript库jQuery和typeahead.js实现,为网页上的搜索框提供了高效且用户友好的自动补全功能。这个插件主要用于提升用户体验,尤其是在需要处理大量数据并希望用户能快速找到...

    Jquery自动补全

    jQuery自动补全是一种常见的前端开发技术,用于提升用户体验,特别是在搜索框或输入字段中,它能够根据用户输入的内容实时提供预测建议。这个功能在许多网站和应用中都有所应用,如百度搜索、谷歌搜索等。它能够帮助...

    jquery自动补全

    **二、jQuery自动补全插件** 1. **jQuery UI Autocomplete**: 它是jQuery UI库的一部分,提供丰富的自定义选项,如最小输入长度、匹配模式、结果排序等。它支持JSON、XML等多种数据格式,并可以与其他UI组件无缝...

    jQuery自动补全筛选input代码.zip

    本项目"jQuery自动补全筛选input代码"是利用jQuery实现的一个功能,它允许用户在input输入框中输入关键词时,自动筛选并显示匹配的信息。这种功能在网页搜索、表单填充等场景下非常实用,提高了用户体验。 首先,...

    Jquery实现仿搜索引擎文本框自动补全插件

    **jQuery 实现仿搜索引擎文本框自动补全插件** 在 Web 开发中,为了提高用户体验,经常会在输入框中使用自动补全(Autocomplete)功能,就像我们在使用搜索引擎时,输入关键词后会看到下拉的建议列表。jQuery 是一...

    Asp.net+JQuery自动补全

    jQuery的`autocomplete`插件是实现自动补全功能的核心组件,它通过监听用户在输入框中的输入事件,向服务器发送异步请求,获取匹配的数据,并在输入框下方显示建议列表。 在Asp.net和jQuery的集成应用中,实现自动...

    jquery自动补全.rar

    1. 使用jQuery UI Autocomplete插件:这是jQuery官方提供的一个强大且高度可定制的自动补全插件。只需引入jQuery UI库及相关CSS、JS文件,然后通过简单的配置即可实现自动补全功能。例如: ```html ``` ```...

    自动补全插件.rar

    这个“自动补全插件.rar”文件包含了实现这一功能的jQuery插件及其演示示例。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在自动补全插件中,jQuery的强大功能被...

    改进版 jquery 仿百度谷歌自动补全输入(支持中文)

    标题“改进版 jquery 仿百度谷歌自动补全输入(支持中文)”涉及到的是一个基于jQuery的前端开发技术,旨在实现类似百度和谷歌搜索框的自动补全功能,而且这一版本特别优化了对中文字符的支持。在网页交互设计中,...

Global site tag (gtag.js) - Google Analytics