－、虽然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. LeetCode 刷题记录

    写在前面:因为要准备面试,开始了在[LeetCode]上刷题的历程.LeetCode上一共有大约150道题目,本文记录我在<http://oj.leetcode.com>上AC的所有题目, ...

  2. Lotus 迁移到Exchange 2010 之准备使用Transport 同步Lotus 相关信息！

    这里我们先来分析下Lotus迁移到Exchange2010 的一些原理,由于存在一定周期的共存时间,因此在共存期间必须来实现相应的同步计划,整个同步计划包含了如下的同步计划:

  3. Weka中EM算法详解

    private void EM_Init (Instances inst) throws Exception { int i, j, k; // 由于EM算法对初始值较敏感,故选择run k mean ...

  4. UI：UITableView 编辑、cell重用机制

    tableView编辑.tableView移动.UITableViewController tableView的编辑:cell的添加.删除. 使⽤场景: 删除⼀个下载好的视频,删除联系⼈: 插⼊⼀条新 ...

  5. C：结构体

    结构体 构造类型:就是有基本的类型组成的 1.结构体  结构体是一种自定义的数据类型 和 int float 是一样的都可以定义变量 数组 只能存放一种类型的容器 结构体   可以存放多种数据类型  ...

  6. Mathematics for Computer Graphics数学在计算机图形学中的应用 [转]

    最近严重感觉到数学知识的不足! http://bbs.gameres.com/showthread.asp?threadid=10509 [译]Mathematics for Computer Gra ...

  7. 10.关联（Association）

    关联关系是类与类之间最常用的一种关系,它是一种结构化关系,用于表示一类对象与另一类对象之间有联系.它体现的是两个类.或者类与接口之间语义级别的一种强依赖关系,比如我和我的朋友.这种关系比依赖更强.不存 ...

  8. java画图输出到磁盘

    直奔主题,实战例子如下 package com.yuanmeng.jase; import java.awt.Color; import java.awt.Font; import java.awt. ...

  9. web前端—工作周报

    2016.07.25-2016.07.29周报: 1.本周工作主要内容: A:完成了宏视云h5播放器升级及大数据上报: B:修复xk-h5播放器bug:在三星手机自带浏览器无法进行滑动seek;  C ...

  10. （4）html表格

    本节解说 :html的表格 表格: *<table></table> 标签定义 HTML 表格. *简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 t ...