JavaScript实现搜索联想功能

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript实现搜索联想功能相关的知识,希望对你有一定的参考价值。

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

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

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

看看实现代码吧

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Jquery联想时间间隔实现原理</title>
</head>
<body>
<input type="text" id="search" placeholder="搜索" />
</body>
<script>
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;
}*/
}
</script>
</html>

执行特效:

技术分享

 

以上是关于JavaScript实现搜索联想功能的主要内容,如果未能解决你的问题,请参考以下文章

Vue移动端项目——搜索联想建议功能的实现(结合watch属性和使用lodash防抖节流)

Ajax实现搜索文本框自动联想功能

ES实现网站搜索

ElasticStack系列之十三 & 联想补全策略

下拉框的搜索(有图,适用下拉选择内容较多,需要搜索,自动联想)

24.VUE学习之-变异方法filter与regexp实现评论搜索功能