－、虽然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. Message Forwarding

    [Preprocess] 在使用forwarding机制前,会先经历2个步骤,只有当这2个步骤均失败的情况下,才会激活forwarding. 1.+(BOOL)resolveInstanceMetho ...

  2. 咏南多层开发框架支持最新的DELPHI 10 SEATTLE

    购买了咏南多层开发框架的老用户如有需要提供免费升级. 中间件

  3. unigui 导入导出数据

    导入:首先要用TUniFileUpload将文件从客户端上传至服务端,然后完成导入. TUniFileUpload上传文件的演示代码: UniFileUpload1.Execute; UniFileU ...

  4. vss使用详解

    下面已VSS6.0为主: 一:安装VSS6.0 安装过程中可能会提示 退出,禁止(abort)  重试(retry)  忽略,跳过(Ignore)  ,我们选 Ignore  跳过此项, 路径自己选择 ...

  5. 标准Dispose实现 (转)

      需要明确一下C#程序(或者说.NET)中的资源.简单的说来,C#中的每一个类型都代表一种资源,而资源又分为两类: 托管资源:由CLR管理分配和释放的资源,即由CLR里new出来的对象: 非托管资源 ...

  6. Cache 工具类

    package com.thinkgem.jeesite.common.utils; import net.sf.ehcache.Cache; import net.sf.ehcache.CacheM ...

  7. perl学习笔记(2)

    1)记得刚开始写perl的时候,对于一个功能,总是拿目前能用的数据类型来解决问题,不想想有没有更好的,能用能解决问题就好,这就导致了后期,要在函数里面添加功能的时候,函数要添加很多参数,一个函数有7. ...

  8. 检索COM 类工厂中CLSID 为 {00024500-0000-0000-C000-000000000046}的组件时失败

    在项目中将数据导出为Excel格式时出现“检索COM 类工厂中CLSID 为 {00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下错误: 80070 ...

  9. 【转】Google推荐的命名规则——Android图片资源

    http://blog.csdn.net/yy1300326388/article/details/45443477 1.译 资产类型 前缀 例子 图标 ic_ ic_star.png 启动图标 ic ...

  10. Oracle数据库备份与恢复的常用方法

    Oracle数据库有三种常用的备份方法,分别是导出/导入(EXP/IMP).热备份和冷备份.导出/导入备份是一种逻辑备份,相对于导出/导入来说,热备份.冷备份是一种物理备份. 导出/导入(Export ...