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

2024-04-27 15:01:11

字体：大中小

来源：转载

供稿：网友

一、需求

　　我们经常会遇到【站内搜索】的需求，为了提高用户体验，我们希望能做到像百度那样的即时智能提示。例如：某公司人事管理系统，想搜索李XX，只要输入“李”，系统自然会提示一些姓李的员工，这样方便用户使用。说白了，就是用户边输入，系统会提示相关的结果；或者，当用户点击搜索框时，就推荐一些内容，如360、百度都会提示今天的主要新闻或搜索量大的内容。

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

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

　　效果一：

　　效果图二：

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

二、参数说明

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

　　url: 请求地址。如：Handler.ashx, 后台获取数据的地址

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 时的事件对象。

三、例子

　　使用例子：

    $("#search").intellSearch({        url:"Handler.ashx",        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("没有当前项");                }            }        }        });

四、总结　　

　　如果你还有自己的逻辑需要处理，也支持链式调用，大可以这样写 $("#search").intellSearch({参数...}).focus(function(){你的处理...});

　　分享该插件希望能帮助到有需要的朋友，主要用于学习。由于是v1.0，可能还有一些bug，有发现的朋友也可以告诉我，我会及时修正。　　

附源代码

js代码

/*搜索智能提示 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);

样式

.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实现的拖动可以调整table单元格大小代码实例

下一篇：鼠标滑过图片变暗文字链接滑出jQuery特效