－、虽然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实现搜索联想功能的更多相关文章

  1. JavaScript表格搜索高亮功能模拟

    在网页表格中模拟excle的搜索高亮显示功能.当在搜索框中输入需要的姓名时,若表格中存在对应的数据,则该表格背景色变为黄色. 下面为表的HTML源码: <!doctype html> &l ...

  2. ajax实现文本框的联想功能

    先写一个jsp通过ajax传值给servlet进行查询再传给对应的div进行显示. <%@ page language="java" contentType="te ...

  3. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

  4. 设置eclipse联想功能

    当我们在用eclipse的时候,怎么能够让自己的编码速度加快?我想利用eclipse的提示功能是其中的方法之一.下面就利出配置eclipse联想功能(代码的提示功能)的步骤: 1. 打开Eclipse ...

  5. 基于Vuejs的搜索匹配功能

    最近一直在看vue,查了很多资料,看了很多文档和博客,大概半知半解了,然后利用所理解的知识写了一个简单的搜索匹配功能. 大概长这个样子:   <!DOCTYPE html> <htm ...

  6. 通通WPF随笔（1）——基于lucene.NET让ComboBox拥有强大的下拉联想功能

    原文:通通WPF随笔(1)--基于lucene.NET让ComboBox拥有强大的下拉联想功能 我一直很疑惑百度.谷哥搜索框的下拉联想功能是怎么实现的?是不断地查询数据库吗?其实到现在我也不知道,他们 ...

  7. input输入框联想功能

    一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的 ...

  8. Vue2.0实现1.0的搜索过滤器功能

    Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <bod ...

  9. Xcode代码提示联想功能失效，按command键点不进去类库，提示“？”

    参考文档:这两篇文章很好的解决了问题.可以很好的解决了问题 Xcode代码提示联想功能失效,按command键点不进去类库,提示“?”,代码全是白色 Xcode4中代码补全(Code Completi ...

随机推荐

  1. c# 邮件发送代码分享

    /// <summary> /// 发送邮件方法 /// </summary> /// <param name="sendMail">发送人&l ...

  2. oracle 去掉空格

    trim(value) 去掉左右空格 ltrim(value) 去掉左空格 rtrim(value) 去掉右空格

  3. 关于缺省路由传递问题的探讨（下）[ip default-network、ip default-gateway等]

    之前文章介绍的是没有路由协议的环境下,那么在有路由协议的环境下: ip default-network IGRP/EIGRP: IP Default-Network所指定的网络必须在EIGRP进程中通 ...

  4. PPPOE拨号演练

    搭建PPPOE服务器,拓扑如下 PPP-Server配置如下: (config)#bba-group pppoe global (config-bba-group)#virtual-template ...

  5. easyui 表单和自定义验证扩展和js自定义返回值

    ================jsp==========================<form  method="post" id="regfrminp&qu ...

  6. JavaScript事件处理的三种方式(转)

    一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用 ...

  7. Release 版本和 Debug 版本

    什么是 Release 版本.Debug 版本? bug-缺陷,程序故障.而debug指的是排除缺陷,显然这个模式是面向开发者的. 而release是满足发布所用. Debug 和 Release,在 ...

  8. jquery 禁止页面滚动-移动端

    禁止 window.ontouchmove=function(e){        e.preventDefault && e.preventDefault();        e.r ...

  9. PropertiesUtil 读取配置文件工具类

    package org.konghao.basic.util; import java.io.FileInputStream; import java.io.FileNotFoundException ...

  10. C#：Func的同步、异步调用(转)

    实际开发中,对于一些耗时较长的操作,我们往往会将其封装成异步方式调用,以加速系统响应或改善用户体验,下面是一个示例: 有一个现成的类MyMath,里面有一个Add方法: 1 public class ...