`
lzhted
  • 浏览: 17212 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

延迟响应文本框(text)输入的方法

阅读更多

    实现一个搜索框,需要支持用户输入之后自动搜索。

    上网查资料,发现各种监听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);
	});
};

     遗留问题:

    输入中文时,会触发多次响应。

 

  • 大小: 40.2 KB
分享到:
评论

相关推荐

    延迟了TextChanged事件的TextBox文本框控件C#源代码

    在标题和描述中提到的"延迟了TextChanged事件的TextBox文本框控件"是指一种优化策略,它不会在每次用户输入时立即触发事件,而是等待用户停止输入一段时间后再处理事件。这种设计可以避免不必要的计算,提高用户体验...

    文本框 默认值 灰色 方法 网络 浏览器

    在网页设计和开发中,创建具有默认灰色文本的文本框是一种常见的需求,这通常用于提供提示信息或预填充用户可能需要输入的数据。标题和描述提到的"文本框默认值灰色方法"涉及到使用JavaScript库jQuery来实现这一效果...

    jQuery text文本框全国按省选择学校

    本项目"jQuery text文本框全国按省选择学校"旨在实现一个功能,即在输入文本框中,用户可以根据省份选择对应的学校,这在教育、招聘或者信息录入等场景下非常实用。 首先,我们需要理解这个功能的核心组成部分: 1...

    js文本框输入内容智能提示效果

    在这个例子中,使用了`keyup`事件来监听用户在文本框(`<input type="text">`)中的输入。`keyup`事件在用户释放键盘按键时触发,可以实时获取用户的输入内容。开发者也可以选择使用`onchange`事件,但它通常在...

    ASP.NET输入文本框自动提示功能

    ASP.NET中的输入文本框自动提示功能是Web应用中常见的交互设计,它极大地提高了用户的输入效率,尤其是在处理大量数据或特定格式的信息时。例如,在搜索功能中,用户输入部分关键词就能看到相关的建议,如百度搜索。...

    具有延迟绑定的文本框

    提供的文件"Text-Box-with-Delayed-Binding.pdf"可能是关于这个主题的详细教程或文章,而"DelayedBindingTextBox.zip"可能包含了一个示例项目,演示如何在实际代码中实现延迟绑定的文本框。通过学习这些材料,开发者...

    延迟TextChanged事件的自定义文本框

    为了优化这种场景,我们可以创建一个自定义的文本框控件,它会延迟`TextChanged`事件的触发,直到用户停止输入一段时间。这就是"延迟TextChanged事件的自定义文本框"的概念。 在C# 2.0中,我们可以继承`System....

    安卓文本框自动提示

    在Android开发中,"安卓文本框自动提示"是一种常见的用户...同时,优化策略如延迟加载和异步处理,能进一步提高应用的性能和响应速度。在实际开发中,开发者可以根据具体需求灵活运用这些技术,提升应用的整体质量。

    ASP中Text的联想输入功能

    6. **性能优化**:为了提高用户体验,可能需要考虑缓存策略、分页加载、延迟加载等技术,避免一次性加载大量数据,同时确保响应速度。 通过以上步骤,我们可以在ASP中实现一个基本的联想输入功能。当然,实际项目中...

    一个ajax做的联想查询文本框(脚本)

    6. **动态更新DOM**:JavaScript接收到服务器响应后,会解析JSON数据,并将结果插入到DOM中,显示在文本框下方。这可能涉及`innerHTML`属性的设置,或者使用jQuery的`append()`、`html()`等方法。 7. **用户体验...

    Jquery实现仿搜索引擎(百度、谷歌)文本框自动补全插件

    自动补全功能的基本工作原理是监听用户在文本框中输入的字符,一旦输入达到一定的长度(例如3个字符),就触发一个函数来搜索匹配的建议词。这些建议词通常来自预先定义的数据集或者通过Ajax请求获取的实时数据。 #...

    MyText(类似QQ聊天文本框 可发送GIF)

    【MyText:构建类似QQ聊天体验的GIF与RTF支持文本框】 在现代的通讯应用中,文本交互已经不再局限于简单的文字输入,而是发展到了包括动态表情、GIF动图以及富文本格式在内的多元表达方式。MyText是一款旨在提供...

    jquery实现input输入框实时输入触发事件代码

    总结一下,这个示例展示了如何利用 jQuery 的事件绑定功能来实现输入框的实时输入响应。通过监听 `input` 和 `propertychange` 事件,可以在用户输入时触发自定义的逻辑,如搜索建议、实时验证等。这种技术在现代...

    vb.net延迟方法 占用少量CPU 效果可以

    ### vb.net延迟方法占用少量CPU效果可以 #### 知识点概述 在.NET框架中,VB.NET(Visual Basic .NET)是一种广泛使用的编程语言,它不仅适用于桌面应用程序开发,还适用于Web应用程序和服务。本文将详细介绍一种在...

    C#编写的ajax控件源码

    【描述】:“查询时,在文本框输入内容时,下拉列表框根据文本框输入的内容无刷新更新”这一描述点出了AJAX的核心优势——异步交互。当用户在文本框中输入字符时,后台会实时触发一个请求,通过JavaScript处理,无需...

    JS实现仿百度输入框自动匹配功能的示例代码

    在本文中,我们将探讨如何使用JavaScript实现一个仿百度输入框的自动匹配功能。这个功能常见于许多网站,...在实际应用中,你可能需要考虑性能优化,如输入延迟触发匹配、缓存部分匹配结果等,以提供更流畅的用户体验。

    AutoCompleteExtender操作说明

    它能够根据用户在文本框中输入的内容动态地提供下拉列表建议,提高用户体验。在这个例子中,我们将深入探讨如何配置和使用`AutoCompleteExtender`,以及相关的JavaScript函数和Web服务方法。 首先,我们来看HTML...

    ios开发记录

    /secure 安全 text 文本 entry 输入 //textField.secureTextEntry = YES; //点击键盘的return键绑定当前类对象的down这个方法 //此方法可以有参数,也可以没有参数,如果没有参数系统不会给你穿参数,如果有参数,...

    C# 窗体程序键盘实例(优化)

    优化可能包括提高响应速度,减少输入延迟,或者改进数字键盘布局,使其更符合用户习惯。 至于“拼音大小写”功能,这通常涉及到文本框的输入状态控制。C#的`TextBox`控件有一个`TextMode`属性,可以设置为`Password...

Global site tag (gtag.js) - Google Analytics