一个基于jquery的智能提示控件intellSeach.js-白红宇

一个基于jquery的智能提示控件intellSeach.js

阅读量：7120 次

发布时间：2019-06-28

本文共 11202 字，大约阅读时间需要 37 分钟。

一、需求

　　我们经常会遇到【站内搜索】的需求，为了提高用户体验，我们希望能做到像百度那样的即时智能提示。例如：某公司人事管理系统，想搜索李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
;}
          
        

转载于:https://www.cnblogs.com/armyfai/p/4793667.html

你可能感兴趣的文章

【转载】一个通过JSONP跨域调用WCF REST服务的例子（以jQuery为例）