现在位置首页 / Jquery/Jquery Mobile /正文

jquery简单好用的自动补齐插件:autoserach.js

作者: IT小兵 | 2015年12月22日| 热度:℃ | 评论: |参与:

今天给大家分享一个jquery简单好用的自动补齐插件:autoserach.js。

 jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用。关于autocomplete的介绍也很多,有兴趣的朋友可以去试试。

  看标题就知道,这里只是分享一个插件,不会讨论后台搜索的相关算法和过程,也就是说,后台返回特定格式的数据,控件负责渲染结果呈现。ok,先看一下效果图:

  效果一:

  

  效果图二:

  

demo预览地址:

jquery自动补全插件autocomplete 

http://www.suchso.com/code/autocomplete/ 

直接百度网盘下载地址:链接:http://pan.baidu.com/s/1mheaULE 密码:jmcw 



  样式与控件无关,只需要一个 input text 就可以了。

二、参数说明

  控件以json格式作为传输格式。参数比较多,大部分都有默认值(具体看源码),有些可能不常用,保持默认即可。如下:

  url: 请求地址。如:data.html, 后台获取数据的地址

大家可以下载这个文件,也可以自己做一个空页面就行。

[{"Name":"tom","ID":"001"},{"Name":"tom cat","ID":"002"},{"Name":"tom2","ID":"003"}]

      property: 要显示的json对象的属性。如果我们直接返回["tom","tom cat","tom2"] 这样的形式,那么该属性可以不用设置;但有时候我们会返回[{"Name":"tom","ID":"001"},{"Name":"tom cat","ID":"002"},{"Name":"tom2","ID":"003"}] 这样的形式,显示的是Name,那么设置该属性为"Name"即可。至于我们想在点击的时候获得点击的项的ID,通过点击事件即可。

      itemNumber: 显示的项数目。

      isEmptyRequest: focus时,空白是否发起请求。就像前面说的,如果点击搜索框时(此时没有内容),想要推荐一些内容,设置该属性为true,即会发起请求。

      defaultValue: 默认值。通常会是:“请输入关键词...” 这类的提示。

      width: 下拉列表宽度。

  aligner: 要对齐的元素。

      maxHeight: 最大高度。如果设置该高度,超过时就会出现滚动条。                     

      ajax:{
        timeout: 超时时间
            cache: 是否缓存
      },       

  event:{          
           setData: 发送请求前触发。用于设置参数
           itemClick: 点击项触发
           enterKeydown: 按下enter键触发
           beforeRender: 所有项呈现前触发
           endRender: 所有项呈现后触发
           itemBeforeRender: 项呈现前触发
           itemAfterRender: 项呈现后触发           
           beforeSend: 发送请求前触发。用户设置请求头部参数等,相当于jquery ajax 的 beforeSend。
     }

   event 里的方法都会在适当的时候触发,需要注意的是,所有方法都接收一个参数,该参数是一个对象,有4个属性,某些情况如果没有该属性的,则为空。包括如下属性:

   jthis: input 的 jQuery 对象。

   jItem: 项的 jQuery 对象。

     data: 返回的 json 字符串。如果在前台需要对返回 json 再进行处理,那么可以通过 data 属性获得,处理完成后,需要将 json 字符串 return。

   event: 事件对象,如按下 enter 时的事件对象。

三、例子


  1、html源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery自动补全插件autocomplete</title>
<style>
.intellResult{margin:0;padding:0;background:#fff;border:1px solid #b6b6b6;clear:both;z-index:999;display:none;}
.intellResult li{margin:0;padding:0;padding:5px 15px;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;white-space:nowrap;}
.intellResult li.cur{background:#E5E0E0;}
</style>
</head>
<body>
<input type="text"  width="200px;" id='search'/> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"  type="application/javascript">
</script>
<script src="autoserach.js">
</script>
<script>
$("#search").intellSearch({
    url:"data.html",
    property:"Name",
    itemNumber:5,
    isEmptyRequest:false,
    defaultValue:"请输入关键字...",        
    width:$("#search").width() + 2,
    maxHeight:-1,
    event:{
 
        itemClick:function(obj){
            alert(obj.item.ID);
        },
        enterKeydown:function(obj){
            if(obj.item){
                alert("有当前项");
            }else{
                alert("没有当前项");
            }
        }
    }    
});
</script>
</body>
</html>

2、插件源代码:

/*搜索智能提示 v1.0
  date:2015.09.08  
*/
;(function(w,$){
    $.fn.intellSearch = function(options){
        var jthis = this;
        var _dftOpts = {
            url:"",//请求地址或数组                     
            property:"",//要显示的json对象的属性
            itemNumber:5,//显示的条数
            isEmptyRequest:false,//focus空白是否发起请求
            defaultValue:"",//默认值
            width:0,//列表宽度
            aligner:jthis,//要对齐的元素
            maxHeight:-1,//最大高度                     
            ajax:{
                timeout:3000,//超时时间
                cache:true//是否缓存
            },
            event:{
                /*参数说明:parameter:{jthis:"jq input",jItem:"jq item",data:"json result",event:"event"}*/
                setData:null,//设置参数
                itemClick:null,//点击项触发
                enterKeydown:null,//按下enter键触发
                beforeRender:null,//所有项呈现前触发
                endRender:null,//所有项呈现后触发
                itemBeforeRender:null,//项呈现前触发
                itemAfterRender:null,//项呈现后触发
                beforeSend:null//发送请求前触发
            }
        };
        $.extend(_dftOpts,options);
        if(!_dftOpts.url){
            throw Error("url不能为空!");
        }
        var jResult;                
        var _value = "";        
        var _ajax = _dftOpts.ajax;
        var _event = _dftOpts.event;
        var _cache = [];
        var _focusCount = 0;//防止focus触发多次(sogou)
         
        /*on window*/
        window.intellObj = window.intellObj || {}; /*for global event*/
        window.intellDocumentClick = window.intellDocumentClick || function(e){
            if(!window.intellObj.jthis){
                return;
            }
            if(e.target !== window.intellObj.jthis[0]){
                setIntellObj(null);
            }
        }
        window.intellDocumentKeydown = window.intellDocumentKeydown || function(e){
            var jthis = window.intellObj.jthis;
            if(!jthis){
                return;
            }
            var code = e.keyCode;
            var value = window.intellObj.value;            
            var jResult,jCurItem,keyword;
            if(code === 13 || code === 38 || code === 40){
                jResult = window.intellObj.jResult;
                jItems = jResult.find("li");
                jCurItem = jResult.find("li.cur");
                if(code === 13){
                    if(jCurItem.length > 0){
                        jCurItem.click();
                    }else{
                        setIntellObj(null);                       
                        if(_event.enterKeydown){
                            _event.enterKeydown({"jthis":jthis,"event":e});
                        }
                    }
                    jthis.blur();
                }else if(jItems.length > 0){
                    if(code === 38){
                        if(jCurItem.length <= 0){
                            jCurItem = jItems.last();
                            jCurItem.addClass("cur");
                            keyword = jCurItem.text();
                        }else{
                            var index = jCurItem.index();
                            jCurItem.removeClass("cur");
                            if(index <= 0){
                                keyword = value;                            
                            }else{
                                jCurItem = jItems.eq(index-1);
                                jCurItem.addClass("cur");
                                keyword = jCurItem.text();
                            }
                        }
                        jthis.val(keyword);
                    }else{
                        if(jCurItem.length <= 0){
                            jCurItem = jItems.first();
                            jCurItem.addClass("cur");
                            keyword = jCurItem.text();
                        }else{
                            var index = jCurItem.index();
                            jCurItem.removeClass("cur");
                            if(index + 1 >= jItems.length){
                                keyword = value;
                            }else{
                                jCurItem = jItems.eq(index+1);
                                jCurItem.addClass("cur");
                                keyword = jCurItem.text();
                            }
                        }
                        jthis.val(keyword);
                    }
                }
            }
        }
        /*event handler*/
        $.fn.unintell = function(){
            remove();
        }
        $(document).unbind({click:window.intellDocumentClick,keydown:window.intellDocumentKeydown})
                   .bind({click:window.intellDocumentClick,keydown:window.intellDocumentKeydown});
        jthis.focus(function(){
            _focusCount++;
            if(_focusCount > 1){
                return;
            }
            if(window.intellObj.jthis && jthis !== window.intellObj.jthis){
                setIntellObj(null);
            }
            var keyword = attrValue();
            if(keyword === _dftOpts.defaultValue){
                keyword = "";
                attrValue(keyword);
            }
            if(keyword || _dftOpts.isEmptyRequest){
                sendRequest();
            }
        })
        jthis.blur(function(){            
            _focusCount = 0;
            if(!attrValue()){
                attrValue(_dftOpts.defaultValue);
            }            
        })
        jthis.keyup(function(e){
            if(e.keyCode === 38 || e.keyCode === 40){
                return;
            }
            var keyword = attrValue();
            if(!keyword){
                remove();
                window.intellObj.value = _value = "";
                return;
            }
            if(keyword !== _value){
                window.intellObj.value = _value = keyword;
                sendRequest();
            }
        });
         
        return initBox();
         
        /*function*/
        function initBox(){
            attrValue(_dftOpts.defaultValue);
            return jthis;
        }        
        function initIntell(){            
            generate();
            register();
            setIntellObj({jthis:jthis,jResult:jResult});
        }
        function generate(){
            var offset = _dftOpts.aligner.offset();
            var width = _dftOpts.width ? _dftOpts.width : _dftOpts.aligner.width();
            jResult = $("<ul>",{"class":"intellResult"});
            jResult.width(width).css({"position":"absolute","left":offset.left,"top":offset.top + jthis.outerHeight()});
            $("body").append(jResult);
            if(_dftOpts.maxHeight > 0){
                jResult.height(_dftOpts.maxHeight).css("overflowY","scroll");
            }
        }
        function remove(){
            if(jResult){
                jResult.remove();
                jResult = null;
            }
        }
        function register(){
            jResult.on("click","li",function(){
                var jItem = $(this);
                var index = jItem.index();
                var keyword = jItem.text();
                attrValue(keyword);                
                _value = keyword;                
                if(_event.itemClick){
                    _event.itemClick({"jthis":jthis,"jItem":jItem,"item":_cache[index]});
                }
            }).on("mouseenter","li",function(){
                $(this).siblings("li").removeClass("cur").end().addClass("cur");
            }).on("mouseleave","li",function(){
                $(this).removeClass("cur");
            });
        }
        function setIntellObj(obj){
            if(!obj){
                if(window.intellObj.jResult){
                    window.intellObj.jResult.remove();
                }
                window.intellObj.jthis = null;
                window.intellObj.jResult = null;
            }else{
                window.intellObj.jthis = obj.jthis;
                window.intellObj.jResult = obj.jResult;
            }
        }
        function sendRequest(){
            var data;
            if(_event.setData){                
                data = _event.setData({"jthis":jthis});
            }
            $.ajax({
                url:_dftOpts.url,
                data:data,
                cache:_ajax.cache,
                timeout:_ajax.timeout,
                beforeSend:function(xhr){
                    if(_event.beforeSend){
                        _event.beforeSend(xhr);
                    }
                },
                success:function(data){
                    remove();
                    showData(data);
                },
                error:null
            });
        }
        function showData(data){
            data = $.trim(data) ? $.parseJSON(data) : data;
            if(_event.beforeRender){
                var rs = _event.beforeRender({"jthis":jthis,"data":data});
                if(rs === false){
                    return;
                }
                if(rs !== undefined){
                    data = rs;
                }
            }
            if(!data){
                return;
            }
            var jItem,jA,jSpan,hasProp,item,text,otherTexts,isRender,index;
            var list = $.isArray(data) ? data : [data];
            var length = list.length;
            length = length > _dftOpts.itemNumber ? _dftOpts.itemNumber : list.length;
            if(length <= 0){
                return;
            }
            initIntell();
            _cache.length = 0;
            hasProp = list[0][_dftOpts.property];
            for(var i=0;i<length;i++){
                item = list[i];
                if(item === null || item === undefined){
                    continue;
                }
                text = hasProp ? item[_dftOpts.property] : item;
                text = $.trim(text.toString());
                if(text === ""){
                    continue;
                }
                jItem = $("<li>",{"class":"intellResult_item"});
                jA = $("<a>",{"title":text}).appendTo(jItem);
                jSpan = $("<span>").appendTo(jA);
                index = text.toLowerCase().indexOf(_value.toLowerCase());
                otherTexts = splitText(text,_value,index);
                if(otherTexts){
                    jSpan.text(text.substr(index,_value.length));
                    if(otherTexts.length > 1){
                        $("<b>",{"text":otherTexts[0]}).insertBefore(jSpan);
                        $("<b>",{"text":otherTexts[1]}).insertAfter(jSpan);
                    }else{
                        if(index === 0){
                            $("<b>",{"text":otherTexts[0]}).insertAfter(jSpan);
                        }else{
                            $("<b>",{"text":otherTexts[0]}).insertBefore(jSpan);
                        }
                    }
                }else{
                    jSpan.text(text);
                }
                isRender = true;
                if(_event.itemBeforeRender){
                    isRender = _event.itemBeforeRender({"jthis":jthis,"jItem":jItem,"item":item});
                }
                if(isRender !== false){
                    jResult.append(jItem);
                    if(_event.itemAfterRender){
                        _event.itemAfterRender({"jthis":jthis,"jItem":jItem,"item":item});
                    }
                }
                _cache.push(item);
            }
            if(_event.endRender){
                _event.endRender({"jthis":jthis});
            }
            jResult.show();
        }
        function attrValue(value){
            if(!value && value != ""){
                return $.trim(jthis.val());
            }
            jthis.val(value);
        }
        function splitText(text,value,index){
            var tlength = text.length;
            var vlength = value.length;
            if(index === -1){
                return null;
            }
            if(index === 0){
                if(index + vlength >= tlength){
                    return null;
                }
                return [text.substr(index + vlength)];
            }
            if(index + vlength >= tlength){
                return [text.substr(0,index)];
            }
            return [text.substr(0,index),text.substr(index + vlength)];
        }
    }
})(window,jQuery);

[Jquery 下拉框美化自动补齐分组插件-Select2最新版使用说明]


点击阅读本文所属分类的更多文章: Jquery/Jquery Mobile 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询