javascript搜索框联想搜索_JavaScript实现搜索联想功能

－、虽然Jquery已经有了一个完整的包 实现前端搜索联想功能，但是出于学习还是想了解一下实现此功能的原理性

回想起来 实现此功能很简单，1.前端输入字符串 文本改变 异步请求服务器 将返回的资料显示在前端就OK了

实际上这样没有问题但是性能却大大减少了很多，那么为了优化性能 此处做了一个时间间隔 当用户输入字符之间停顿一定时间后去请求资料

看看实现代码吧

Jquery联想时间间隔实现原理

function RequestAjax(text){

console.log("测试：" + text);

}

var input = document.getElementById("search");

input.addEventListener("keyup", function(event){

throttle(RequestAjax, null, 1000, this.value,1000);

});

function throttle(fn,context,delay,text,mustApplyTime){

clearTimeout(fn.timer);//清楚当前定时器

/*当需求要求两次文本输入时间超过规定时间 执行一次取消注释 否则*/

/*fn._cur=Date.now(); //记录当前时间

if(!fn._start){ //若该函数是第一次调用，则直接设置_start,即开始时间否则为_cur，即此刻的时间

fn._start=fn._cur;

}

if(fn._cur-fn._start>mustApplyTime){

//当前时间与上一次函数被执行的时间作差，与mustApplyTime比较，若大于，则必须执行一次函数，若小于，则重新设置计时器

fn.call(context,text);

fn._start=undefined;

}else{*/

fn.timer=setTimeout(function(){

fn.call(context,text+"调用服务器");

},delay);

/*fn._start=fn._cur;

}*/

}

执行特效：