jQuery 자동완성 자동완성 플러그인_jquery

유사한 플러그인과 비교하면 세 가지 기능이 있습니다.
1. 쿼리 결과를 캐시할 수 있음(2차 쿼리가 빠름)
2. 키업이 아닌 모니터링 방식(일부 시스템/상황에서 keyxxx 이벤트가 발생하지 않는 문제 해결)
3. ?)

내 E6500과 2G 메모리에서는 총 4469개의 호출이 30초에 이루어졌는데, 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"를 검색하면 프로그램이 해당 쿼리 결과를 캐시하고 두 번째로 test를 검색하면 직접 읽습니다. 캐시에서.
매개변수 formId: 반드시 입력해야 하는 양식의 ID입니다.
매개변수 콜백: 도메인 간 문제를 처리하기 위해 jsonp를 사용할지 여부입니다.
핵심 코드:
suggest.js

코드 복사 코드는 다음과 같습니다.

(function($){
$.tools = $.tools || {version: '1.0'};
$.tools.suggest = {};
$.tools .suggest.defaults = {
url : null,
params : null,
delay : 100,
cache : true,
formId : '#search_form',
focus:null ,
콜백 : true
}
$.tools.suggest.borderKey = {
UP: 38,
DOWN: 40,
TAB: 9,
ESC: 27 ,
입력: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, 키, 옵션);
}
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 = 옵션.UP,
DOWN = 옵션.DOWN,
TAB = 옵션.TAB,
ESC = 옵션.ESC,
ENTER = 옵션. ENTER,
index = -1,
choseKey = null,
backval = null,
hidden = false,
locksuggest = false


//init
if(초점){
self.focus();
searchtimer = setInterval(getKey, 지연);
}
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); = 0;
if($('#suggest').css('display') == '없음'){
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(검색타이머);
검색 타이머 = 0;
hideResult();
거짓을 반환합니다.
}else if(e.keyCode == ENTER){
clearInterval(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( );
팁 = 사실;
}else{
rebox.html(result).show();
}
rebox.find('li').bind('mouseover',function(){
// 锁정提示层，保证不因冒泡关闭提示层
locksuggest = true;
index = $(this).index();
changeSelect(index,false);
})
.bind('click',function(){
changeSelect(index) ;
검색제출()
});
rebox.bind('mouseout',function(){
locksuggest = false;
})
}else{
// 如果检索结果为空，清空提示层
rebox.hide();
}
}

functionchangeSelect(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'); / html 구조에 따라 프롬프트 결과 길이를 다시 계산합니다.
rlen = rebox.find('li').size()
}
}

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

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

}); >}
})(jQuery);



코드 패키지 다운로드