jQuery オートコンプリート autocomplete plugin_jquery

類似のプラグインと比較すると、次の 3 つの特徴があります。
1. クエリ結果をキャッシュできます (二次クエリは高速です)
2. 非キーアップ監視方法 (一部のシステム/環境で keyxxx イベントがトリガーされない問題を解決します)
3.見た目は良いですか?)

私の E6500 と 2G メモリでは、30 秒間に合計 4469 件の呼び出しが行われ、Baidu では 2432 件の呼び出しが行われ、80.24 ミリ秒かかりました。ミリ秒。

呼び出しが 2 倍近くになるのは jQuery の問題ですが、具体的な原因はまだわかりません。ご存知の方がいらっしゃいましたら、ぜひご教示ください。

メソッドの呼び出し

コードのコピー コードは次のとおりです:

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

パラメータ URL:baseUrl (例: http://www.target.com/search.php
パラメータ) params: url サフィックスリスト、例の結合 URL は次のとおりです: http://www.target.com/search.php?kw=xxx&n=10&callback=? (コールバックはデフォルトで追加されます)
パラメータ遅延: 入力間隔主に負荷を軽減するために時間を設定します。値が大きいほど、負荷が低くなり、クエリ速度が遅くなります。
パラメータ キャッシュ: キャッシュを使用するかどうか。デフォルトは true です。たとえば、「test」を検索すると、プログラムは対応するクエリ結果をキャッシュし、2 回目に test を検索すると、その結果が直接読み込まれます。キャッシュから。
パラメータ formId: フォームの ID を入力する必要があります。
パラメータ コールバック: クロスドメインの問題を処理するために jsonp を使用するかどうか。
コアコード:
suggest.js

コードをコピー コードは次のとおりです。

(function($){
$.tools = $.tools || {バージョン: '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{ $.extend({}, $.tools.suggest.defaults, key, options);
}
return this.each(function(){
var
self = $(this),
url = options.url、
params = options.params、
searchUrl = null、
searchtimer = 0、
lay = options.lay、
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 = オプション。 ENTER、
index = -1、
choseKey = null、
backval = null、
hidden = false、
locksuggest = false


//init
if(focus){
self.focus();
searchtimer = setInterval(getKey, 遅延);
}
self.bind("focus",function(){
searchtimer = setInterval(getKey, late);
// 触発焦点時の初期化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;
}
if(indexindex=Math.abs(rlen)-1;
changeSelect(index);
e.preventDefault();
return false;
clearInterval(searchtimer); = 0;
if($('#suggest').css('display') == 'none'){
reSet();
return
}
インデックス;
if(index>=rlen){
index=0;
e.preventDefault();
} else if(e.keyCode == TAB){
clearInterval(searchtimer);
hideResult();
}else if(e.keyCode == ESC) >clearInterval(検索タイマー);
検索タイマー = 0;
隠す結果();
false を返します。
}else if(e.keyCode == ENTER){
clearInterval(searchtimer);
検索タイマー = 0;
}else if(searchtimer == 0){
searchtimer = setInterval(getKey, late);
}
});

// 取关键词
function getKey(){
val = $.trim(self.val());
// 关键词不空かつ关键词不重复
if(!!val && val!=backval){
backval = val;
// 必要がない場合、キャッシュは 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 '
'; 🎜>}
});
if(キャッシュ && !!!$.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( );
ヒント = 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);
}
}

関数 reSet(){
if(!!self.val()){
index = -1;
$('#suggest').css('display','block');
rebox.find('li.mo').removeClass('mo'); / HTML 構造に従ってプロンプト結果の長さを再計算します
rlen = rebox.find('li').size();
}
}

function HideResult(){
if (!locksuggest){
choseKey = backval = null;
rebox.hide();

関数 searchSubmit() {
self.val(choseKey);
clearInterval(searchtimer);

}); >}
})(jQuery);



コード パッケージのダウンロード