实现一个搜索框,需要支持用户输入之后自动搜索。
上网查资料,发现各种监听change、input事件的例子,但是都有一个缺点:实时响应,不是延时响应。
实时响应最大的问题是:
- 对服务端的压力太大。
- 处理请求的并发问题。
例如:用户希望搜索关键字“bootstrap”,每输入一个字母都要向服务端发送请求,共请求9次,如果boots请求比bootstrap的响应处理慢,最后页面显示的是错误的信息。 为了解决实时响应的问题,需要引入延时机制,判断用户输入结束才向服务端请求。具体利用setTimeout方法实现。
完整的可执行工程代码文件见附近,使用的开发环境是Spring Tool Suite 3.6.4,jre1.8;浏览器是google chrome。效果如图。
js代码如下:
$(document).ready() { // 绑定文本框的输入事件 $("#searchtext").bind("input", function() { // 获取当前文本框的输入值 var value = $("#searchtext").val(); var dosomething = function() { // 如果文本框的输入在1.5秒后没有变化,才执行逻辑向服务发起请求 if ($("#searchtext").val() == value) { // add your request... alert("catch you :) -> " + value); } }; // 延迟1.5秒才执行 setTimeout(dosomething, 1500); }); };
遗留问题:
输入中文时,会触发多次响应。
相关推荐
自己写了个winForm处理文本框只能输入数字,与大家分享
1.文本框只能输入数字代码(小数点也不能输入) 2.只能输入数字,能输小数点. 4.只能输入字母和汉字 等等
js限制文本框只输入正整数 js限制文本框只输入正整数
各种防止文本框中输入的方法 javascript
C#文本框只能输入数字 希望对大家有帮助
javasxript的常用文本框的输入限制代码 有正则,有keyup,也有粘贴限制
c# 文本框只能输入数字
VBA 64位系统,窗口无法获取焦点,文本框无法输入解决 跟大家分享,我找这个方案很久了
jQuery计算文本框可输入字数代码基于jquery-2.2.3.min.js制作,动态计算文本框可输入字数统计。
C#文本框TextBox只有输入数字 C#文本框输入数字 C#文本框数字 C#TextBox只有输入数字 C#TextBox只能输入数字
更好用的文本框只能输入数字的版本,防止用户的误输入对小键盘上的数字同样适用.挣点积分!谢谢!
验证文本框只能输入数字,其它任何字符都不能输入,很好用的一个方法,可以直接使用
本文实例讲述了jQuery+php实时获取及响应文本框输入内容的方法。分享给大家供大家参考,具体如下: 该程序能够查出可用余额: HTML部分: <input type=text name=username id=username onkeyup=search_func(this...
C#文本框输入提示功能。有完整的代码,可供参考,获得焦点后就会自动消失
文本框验证,允许输入整数、小数、负号;键盘验证;文本框文本改变事件;
文本框限制输入的正则表达式 只能输入数字 只能输入字母 和小数点的保留位数
该程序不仅能阻止用户从键盘输入非整形数据,而且还能检测用户粘贴和拖放的数据是否合法!代码中有详细解释,相信稍微懂js的人都能看懂!
文本框只能输入 数字,小数点,减号 字符的正则表达式
设置文本框输入字符限制方法,这里主要是英文字母的限制