jQuery Autocomplete autocomplete plugin_jquery

Compared with similar plug-ins, it has three features.
1. Query results can be cached (secondary query is fast)
2. Non-keyup monitoring method (solve the problem that keyxxx events cannot be triggered in some systems/circumstances)
3. Simple parameters (good-looking ? )

The performance of the plug-in is quite good. On my E6500 and 2G memory, a total of 4469 calls were made in 30 seconds, taking 94.65 milliseconds; Baidu’s was 2432 calls and 80.24 milliseconds.

The nearly doubled call is a problem in jQuery, but I haven’t figured out the specific reason yet. If any brother knows, please feel free to enlighten me.

Call method

Copy code The code is as follows:

jQuery ("#kw").suggest({
url:siteConfig.suggestionUrl,
params:{
kw:function(){return jQuery("#kw").val()},
n:10
}
});

Parameter url: baseUrl, for example http://www.target.com/search.php
Parameter params: url Suffix list, the combined URL in the example is: http://www.target.com/search.php?kw=xxx&n=10&callback=? (callback is added by default)
Parameter delay: input interval time, mainly to reduce Load, the larger the value, the lower the load and the slower the query speed.
Parameter cache: Whether to use cache, the default is true. For example, when searching for "test", the program will cache the corresponding query results, and when searching for test for the second time, it will be read directly from the cache.
Parameter formId: Must be filled in, the id of the form
Parameter callback: Whether to use jsonp to handle cross-domain issues.
Core code:
suggest.js

Copy code The code is as follows:

(function($){
$.tools = $.tools || {version: '1.0'};
$.tools.suggest = {};
$.tools.suggest.defaults = {
url : null,
params : null,
delay : 100,
cache : true,
formId : '#search_form',
focus:null,
callback : true
}
$.tools.suggest.borderKey = {
UP: 38,
DOWN: 40,
TAB: 9,
ESC: 27,
ENTER:13
}

$.fn.suggest=function(options,fn){
var options,key = $.tools.suggest.borderKey;
if($.isFunction(options)){
fn=options;
options = $.extend({}, $.tools.suggest.defaults, key);
}else{
options = $.extend({}, $.tools.suggest.defaults, key, options);
}
return this.each(function(){
var
self = $(this),
url = options.url,
params = options.params,
searchUrl = null,
searchtimer = 0,
delay = options.delay,
cache = options.cache,
callback = options.callback,
formobj = $(options.formId),
focus = options.focus,
rebox = $('

').attr("id","suggest"),
htmlLi = null,
litop = null,
lileft = null,
liwth = null,
tip = false,
val = null,
rlen = null,
UP = options.UP,
DOWN = options.DOWN,
TAB = options.TAB,
ESC = options.ESC,
ENTER = options.ENTER,
index = -1,
choseKey = null,
backval = null,
hidden = false,
locksuggest = false


//init
if(focus){
self.focus();
searchtimer = setInterval(getKey, delay);
}
self.bind("focus",function(){
searchtimer = setInterval(getKey, delay);
// 触发焦点时初始化backval的值
backval = (backval=$.trim(self.val()))==''?null:backval;
})
.bind("blur",function(){
clearInterval(searchtimer);
searchtimer = 0;
hideResult();
})
.bind("keydown",function(e){
// 少于10项不使用switch
if(e.keyCode == UP){
clearInterval(searchtimer);
searchtimer = 0;
if($('#suggest').css('display') == 'none'){
reSet();
return false;
}
index--;
if(index<0){
index=Math.abs(rlen)-1;
}
changeSelect(index);
e.preventDefault();
return false;
}else if(e.keyCode == DOWN){
clearInterval(searchtimer);
searchtimer = 0;
if($('#suggest').css('display') == 'none'){
reSet();
return false;
}
index ;
if(index>=rlen){
index=0;
}
changeSelect(index);
e.preventDefault();
return false;
}else if(e.keyCode == TAB){
clearInterval(searchtimer);
searchtimer = 0;
hideResult();
}else if(e.keyCode == ESC){
clearInterval(searchtimer);
searchtimer = 0;
hideResult();
return false;
}else if(e.keyCode == ENTER){
clearInterval(searchtimer);
searchtimer = 0;
}else if(searchtimer == 0){
searchtimer = setInterval(getKey, delay);
}
});

// 获取关键词
function getKey(){
val = $.trim(self.val());
// 关键词不为空且关键词不重复
if(!!val && val!=backval){
backval = val;
// 如不需要缓存结果，设cache为false
if(cache && !!$.tools.suggest[val]){
index = -1;
rlen = $.tools.suggest[val][1];
appendSuggest($.tools.suggest[val][0]);
}else{
searchurl = url '?' $.param(params);
getResult(searchurl,function(htmltemp,htmllen){
index = -1;
rlen = htmllen;
appendSuggest(htmltemp);
});
}
}
// 关键词为空
if(!!!val && !hidden){
hideResult();
}
}

// 获取提示数据
function getResult(searchurl,fn){
if(callback){searchurl = searchurl '&callback=?';}
$.getJSON(searchurl,function(data){
var htmltemp = '',
htmllen = 0,
inputWord = self.val()

$.each(data.list,function(i,n){
if(n.word != inputWord){
htmltemp = '
• ' n.word '
';
htmllen ;
}
});
if(cache && !!!$.tools.suggest[val]){$.tools.suggest[val]=[htmltemp,htmllen];}
fn.call(document,htmltemp,htmllen)
});
}

// 插入提示数据
function appendSuggest(result){
locksuggest = hidden = false;
if(!!result){
if(!tip){
litop = self.offset().top self.outerHeight()-1;
lileft = self.offset().left;
liwth = self.outerWidth()-2;
rebox.css({'position':'absolute','top':litop,'left':lileft,'width':liwth}).html(result).appendTo('body').show();
tip = true;
}else{
rebox.html(result).show();
}
rebox.find('li').bind('mouseover',function(){
// 锁定提示层，保证不因冒泡关闭提示层
locksuggest = true;
index = $(this).index();
changeSelect(index,false);
})
.bind('click',function(){
changeSelect(index);
searchSubmit();
});
rebox.bind('mouseout',function(){
locksuggest = false;
})
}else{
// 如果检索结果为空，清空提示层
rebox.hide();
}
}

function changeSelect(index,v){
v=v==false?false:true;
var obj = rebox.find('li').eq(index);
rebox.find('li.mo').removeClass('mo');
obj.addClass("mo");
if(v){
choseKey = backval = obj.html( );
self.val(choseKey);
}
}

function reSet(){
if(!!self.val()){
index = -1;
$('#suggest').css('display','block');
rebox.find('li.mo').removeClass('mo');
/ / Recalculate the prompt result length according to the html structure
rlen = rebox.find('li').size();
}
}

function hideResult(){
if (!locksuggest){
choseKey = backval = null;
hidden = true;
rebox.hide();
}
}

function searchSubmit(){
self.val(choseKey);
hideResult();
clearInterval(searchtimer);
formobj.submit();
}

});
}
})(jQuery);

Code package download