福利到~分享一個基于jquery的智能提示控件intellSeach.js

2024-04-27 15:01:11

字體：大中小

供稿：網(wǎng)友

一、需求

　　我們經(jīng)常會遇到【站內(nèi)搜索】的需求，為了提高用戶體驗，我們希望能做到像百度那樣的即時智能提示。例如：某公司人事管理系統(tǒng)，想搜索李XX，只要輸入“李”，系統(tǒng)自然會提示一些姓李的員工，這樣方便用戶使用。說白了，就是用戶邊輸入，系統(tǒng)會提示相關(guān)的結(jié)果；或者，當用戶點擊搜索框時，就推薦一些內(nèi)容，如360、百度都會提示今天的主要新聞或搜索量大的內(nèi)容。

　　jquery 已經(jīng)有一個這樣的插件了，叫 autocomplete, 但我覺得不好用。關(guān)于autocomplete的介紹也很多，有興趣的朋友可以去試試。

　　看標題就知道，這里只是分享一個插件，不會討論后臺搜索的相關(guān)算法和過程，也就是說，后臺返回特定格式的數(shù)據(jù)，控件負責渲染結(jié)果呈現(xiàn)。ok,先看一下效果圖：

　　效果一：

　　效果圖二：

　　樣式與控件無關(guān)，只需要一個 input text 就可以了。

二、參數(shù)說明

　　控件以json格式作為傳輸格式。參數(shù)比較多，大部分都有默認值（具體看源碼），有些可能不常用，保持默認即可。如下：

　　url: 請求地址。如：Handler.ashx, 后臺獲取數(shù)據(jù)的地址

PRoperty: 要顯示的json對象的屬性。如果我們直接返回["tom","tom cat","tom2"] 這樣的形式，那么該屬性可以不用設(shè)置；但有時候我們會返回[{"Name":"tom","ID":"001"},{"Name":"tom cat","ID":"002"},{"Name":"tom2","ID":"003"}] 這樣的形式，顯示的是Name，那么設(shè)置該屬性為"Name"即可。至于我們想在點擊的時候獲得點擊的項的ID,通過點擊事件即可。

itemNumber: 顯示的項數(shù)目。

isEmptyRequest: focus時，空白是否發(fā)起請求。就像前面說的，如果點擊搜索框時(此時沒有內(nèi)容)，想要推薦一些內(nèi)容，設(shè)置該屬性為true，即會發(fā)起請求。

defaultValue: 默認值。通常會是：“請輸入關(guān)鍵詞...” 這類的提示。

width: 下拉列表寬度。

　　aligner: 要對齊的元素。

maxHeight: 最大高度。如果設(shè)置該高度，超過時就會出現(xiàn)滾動條。

      Ajax:{
      　　timeout: 超時時間
            cache: 是否緩存
      },

　　event:{        　　
           setData: 發(fā)送請求前觸發(fā)。用于設(shè)置參數(shù)
           itemClick: 點擊項觸發(fā)
           enterKeydown: 按下enter鍵觸發(fā)
           beforeRender: 所有項呈現(xiàn)前觸發(fā)
           endRender: 所有項呈現(xiàn)后觸發(fā)
           itemBeforeRender: 項呈現(xiàn)前觸發(fā)
           itemAfterRender: 項呈現(xiàn)后觸發(fā)
           beforeSend: 發(fā)送請求前觸發(fā)。用戶設(shè)置請求頭部參數(shù)等，相當于jquery ajax 的 beforeSend。
     }

　 event 里的方法都會在適當?shù)臅r候觸發(fā)，需要注意的是，所有方法都接收一個參數(shù)，該參數(shù)是一個對象，有4個屬性，某些情況如果沒有該屬性的，則為空。包括如下屬性：

　 jthis: input 的 jQuery 對象。

　 jItem: 項的 jQuery 對象。

data: 返回的 json 字符串。如果在前臺需要對返回 json 再進行處理，那么可以通過 data 屬性獲得，處理完成后，需要將 json 字符串 return。

　 event: 事件對象，如按下 enter 時的事件對象。

三、例子

　　使用例子：

    $("#search").intellSearch({        url:"Handler.ashx",        property:"Name",        itemNumber:5,        isEmptyRequest:false,        defaultValue:"請輸入關(guān)鍵字...",                width:$("#search").width() + 2,        maxHeight:-1,        event:{            itemClick:function(obj){                alert(obj.item.ID);            },            enterKeydown:function(obj){                if(obj.item){                    alert("有當前項");                }else{                    alert("沒有當前項");                }            }        }        });

四、總結(jié)　　

　　如果你還有自己的邏輯需要處理，也支持鏈式調(diào)用，大可以這樣寫 $("#search").intellSearch({參數(shù)...}).focus(function(){你的處理...});

　　分享該插件希望能幫助到有需要的朋友，主要用于學習。由于是v1.0，可能還有一些bug，有發(fā)現(xiàn)的朋友也可以告訴我，我會及時修正?！　?/p>

附源代碼

js代碼

/*搜索智能提示 v1.0  date:2015.09.08  */;(function(w,$){    $.fn.intellSearch = function(options){        var jthis = this;        var _dftOpts = {            url:"",//請求地址或數(shù)組                                 property:"",//要顯示的json對象的屬性            itemNumber:5,//顯示的條數(shù)            isEmptyRequest:false,//focus空白是否發(fā)起請求            defaultValue:"",//默認值            width:0,//列表寬度            aligner:jthis,//要對齊的元素            maxHeight:-1,//最大高度                                 ajax:{                timeout:3000,//超時時間                cache:true//是否緩存            },            event:{                /*參數(shù)說明:parameter:{jthis:"jq input",jItem:"jq item",data:"json result",event:"event"}*/                setData:null,//設(shè)置參數(shù)                itemClick:null,//點擊項觸發(fā)                enterKeydown:null,//按下enter鍵觸發(fā)                beforeRender:null,//所有項呈現(xiàn)前觸發(fā)                endRender:null,//所有項呈現(xiàn)后觸發(fā)                itemBeforeRender:null,//項呈現(xiàn)前觸發(fā)                itemAfterRender:null,//項呈現(xiàn)后觸發(fā)                beforeSend:null//發(fā)送請求前觸發(fā)            }        };        $.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觸發(fā)多次(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);

樣式

.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;}

上一篇：jquery實現(xiàn)的拖動可以調(diào)整table單元格大小代碼實例

下一篇：鼠標滑過圖片變暗文字鏈接滑出jQuery特效