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;
}*/
}
执行特效：
JavaScript表格搜索高亮功能模拟
在网页表格中模拟excle的搜索高亮显示功能.当在搜索框中输入需要的姓名时,若表格中存在对应的数据,则该表格背景色变为黄色. 下面为表的HTML源码: &l ...
ajax实现文本框的联想功能
先写一个jsp通过ajax传值给servlet进行查询再传给对应的div进行显示.
用jsonp实现搜索框功能
用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...
设置eclipse联想功能
当我们在用eclipse的时候,怎么能够让自己的编码速度加快?我想利用eclipse的提示功能是其中的方法之一.下面就利出配置eclipse联想功能(代码的提示功能)的步骤: 1. 打开Eclipse ...
基于Vuejs的搜索匹配功能
最近一直在看vue,查了很多资料,看了很多文档和博客,大概半知半解了,然后利用所理解的知识写了一个简单的搜索匹配功能. 大概长这个样子:
通通WPF随笔(1)——基于lucene.NET让ComboBox拥有强大的下拉联想功能
原文:通通WPF随笔(1)--基于lucene.NET让ComboBox拥有强大的下拉联想功能 我一直很疑惑百度.谷哥搜索框的下拉联想功能是怎么实现的?是不断地查询数据库吗?其实到现在我也不知道,他们 ...
input输入框联想功能
一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的 ...
Vue2.0实现1.0的搜索过滤器功能
Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下.
Xcode代码提示联想功能失效，按command键点不进去类库，提示“？”
参考文档:这两篇文章很好的解决了问题.可以很好的解决了问题 Xcode代码提示联想功能失效,按command键点不进去类库,提示“?”,代码全是白色 Xcode4中代码补全(Code Completi ...
随机推荐
Ubuntu下的生活--安装
概要 整个安装过程是通过离线包安装,而非在线安装. 目录 JDK安装与配置 Eclipse安装与配置 Apache安装与配置 MySQL的安装 JDK安装与配置 版本:jdk-7u71-linux-i ...
Spring整合JUnit框架进行单元测试代码使用详解
一.Spring提供的JUnit框架扩展: 1. AbstractSpringContextTests:spring中使用spring上下文测试的Junit扩展类,我们一般不会使用这个类来进行单元 ...
线程学习笔记(EventWaitHandler)AutoResetEvent的使用
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
【转】apache与tomcat的区别
Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...
【Integer To Roman】cpp
题目: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from ...
Thread Pool Engine, and Work-Stealing scheduling algorithm
http://pages.videotron.com/aminer/threadpool.htm http://pages.videotron.com/aminer/zip/threadpool.zi ...
css 画竖着线条
table控制:
HDU 4793 2013 Changsha Regional Collision[简单的平面几何]
圆形奖章给定半径的半径和圆形区域.另一个硬币的半径,然后在桌面上平稳.给定硬币的速(的大小和方向,vx,vy)和坐标(奖牌同心圆形区域,圆和心脏为源),Q币在一个圆形区域和多少下滑(不管是什么圆形区域 ...
char,varchar,nvarchar,text区别与联系
CHAR,NCHAR 定长,速度快,占空间大,需处理VARCHAR,NVARCHAR,TEXT 不定长,空间小,速度慢,无需处理NCHAR.NVARCHAR.NTEXT处理Unicode码
POS Tagging 标签类型查询表(Penn Treebank Project)
在分析英文文本时,我们可能会关心文本当中每个词语的词性和在句中起到的作用.识别文本中各个单词词性的过程,可以称为词性标注. 英语主要的八种词性分别为: 1.名词(noun) 2.代词(pronoun) ...