`

文本框输入关键字自动提示相近信息

阅读更多
就好像百度搜索框那样,根据文本框输入的信息提示你想要的搜索关键字



jquery如下
	  $('#branch').autocomplete('<%=root%>/transfer_autoGetInfo.action', {//后台的地址
			  extraParams: { 
                             provCd: function(){ return $("#province").val();}//往后台传递非当前文本框的其他参数需要这样处理,例如我要向后台传递name为provCd的参数,province为某个文本框的id,多个参数使用逗号分开
                             },
			     max: 6,   //提示列表里的条目数
			     minChars: 0,    //自动完成激活之前填入的最小字符
			     width: 300,     //提示的宽度,溢出隐藏
			     scrollHeight: 300,   //提示的高度,溢出显示滚动条
			     matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
			     autoFill: false,    //自动填充
			     parse: function(data) {//有点类似于ajax的方式
			        return $.map(eval(data), function(row) {
			            return {
			                data: row,
			                value: row.pmsBankNm,//pmsBankNm为后台返回给前台的值,也是要提示的信息
			                result: row.pmsBankNm
			            };
			        });
			    },
			    formatItem: function(row, i, max) {
			         return   row.pmsBankNm;
			       },
			    formatMatch: function(row, i, max) {
			        return row.pmsBankNm +row.pmsBankNm;
				},
			    formatResult: function(row) {
			     	return row.pmsBankNm;
			    }
			});
	  });


文本框如下所示:
<input id="branch" name="branch" style="">

后台代码如下所示:


	String obj = ServletActionContext.getRequest().getParameter("q");//当前文本框的输入的值
		//在这里获得你在autocomplete中传向后台的其他参数,用于匹配准准确的提示信息
		//例如,我发的那个提示支行信息的例子,不仅需要向后台传递支行信息文本框用户输入的信息,还需要向后台传递省份,城市等信息来匹配数据
		//可以用contains等方法来匹配信息
		JSONArray json = JSONArray.fromObject(tpmsBankInfs);//tpmsBankInfs为你获得的提示性信息
		ResponseHandler.resWithJson(ServletActionContext.getResponse(),
				json.toString());



先放几张之前工作时做的东西

示例1:

示例2:




如果要修改提示框的样式以及提示框的字体等可以修改附件中的css文件
实现该功能的css以及js如附件

分享到:
评论

相关推荐

    jQuery文本框input输入关键字自动补全筛选代码

    本示例中的"jQuery文本框input输入关键字自动补全筛选代码"是利用jQuery实现的一种常见用户体验增强功能,通常用于网站的搜索框,当用户在文本框中输入关键词时,系统会实时显示与输入关键词匹配的相关建议,提升...

    文本框关键字智能提示

    标题中的“文本框关键字智能提示”是指在Windows窗体应用(Winform)中,通过TextBox控件实现一种功能,即当用户输入时,系统能够自动根据已有的关键字库提供智能提示,帮助用户快速完成输入。这种功能常见于各种...

    jQuery文本框input输入关键字自动补全筛选代码.zip

    在这个“jQuery文本框input输入关键字自动补全筛选代码.zip”压缩包中,包含了一个使用jQuery实现的自动补全功能,这是一种常见的用户输入辅助工具,常见于搜索框或者表单中,能够根据用户输入的关键字,实时显示...

    C#文本框输入提示功能

    当文本框为空时,会显示一条提示信息,一旦用户开始输入或文本框获得焦点,提示信息会自动消失。这种功能在许多应用中都能见到,例如登录界面的用户名和密码字段。 在提供的资源中,"InfoTextBox.cs"可能是自定义的...

    自定义 wpf 文本框输入自动下拉提示控件,可以设置延迟时间,输入字符长度来查询

    通过以上讨论,我们了解了如何创建一个自定义的 WPF 文本框控件,它具有自动下拉提示功能,可以根据延迟时间和输入字符长度进行查询。这个过程涵盖了 WPF 控件自定义、依赖属性、事件处理、数据绑定以及样式和模板的...

    前台实现文本框中c#关键字变色及提示

    关键字提示功能则可能通过一个下拉列表或者弹出框的形式出现,当用户在文本框中输入时,系统会根据已输入的字符提供相关的C#关键字建议。这通常涉及到自动补全算法,它可以基于用户的输入预测并显示可能的完成项。...

    jQuery文本框输入自动提示,类似百度搜索效果

    本篇文章将详细讲解如何利用jQuery实现一个文本框输入自动提示的功能,这一功能常见于搜索引擎,如百度搜索框,当用户在输入框中键入文字时,系统会实时提供相关的搜索建议。 一、基本原理 自动提示功能的核心是...

    像百度一样 文本框输入文本后提示相关信息

    文本框输入文本后提示相关信息”是指实现一个搜索或者输入功能,当用户在文本框中输入文字时,系统能够实时显示与输入内容相关的建议或信息,这种技术通常被称为自动补全(Autocomplete)或者智能提示(Intelligent ...

    Javascript实现文本框输入提示

    Javascript实现的网页文本框输入提示 实现原理: 文本框输入内容后,搜索字符串数组,将匹配内容写入DIV以下拉列表形式展现,并支持方向键选择,效果类似搜索网站的输入提示。 友情提示: 较为粗糙的实现方法,...

    JS应用(文本框输入出现自动提示框和右键菜单)

    根据给定的文件信息,我们可以总结出以下关于“JS应用(文本框输入出现自动提示框和右键菜单)”的关键知识点: ### 一、项目概述 本项目主要通过JavaScript实现了一个文本框,在用户输入时能够自动弹出建议列表,...

    C#文本框输入提示功能 下拉框

    这个功能通常指的是文本框的水印效果,即当文本框为空时显示一段提示文字,一旦用户开始输入,提示文字会自动消失。在C#中,我们可以利用`TextBox`控件的`Text`属性和`GotFocus`、`LostFocus`事件来实现。首先设置`...

    WPF 文本框提示信息

    在传统的文本框设计中,水印效果是指在文本框为空时显示的一段提示文字,当用户开始输入时,这些文字会自动消失。在WPF中,虽然没有内置的Watermark属性,但可以通过自定义控件或者使用第三方库来实现。一种常见的...

    jQuery文本框输入文字自动筛选代码

    在本文中,我们将深入探讨如何使用jQuery实现一个文本框输入文字自动筛选的功能,这在许多网页应用中都是一项实用的功能,比如搜索栏、过滤列表等。这个功能的主要目的是提高用户体验,让用户在输入关键字时能够实时...

    Ajax文本框输入提示附加数据库即可

    在这个案例中,我们探讨的是如何使用Ajax来实现一个文本框输入时的提示功能,这些提示信息是从数据库动态获取的。 首先,我们需要在前端创建一个文本框,用户在此输入信息时,会触发Ajax请求。HTML代码可能如下: ...

    jQuery实现文本框输入自动提示邮箱后缀

    在本文中,我们将深入探讨如何使用jQuery来实现一个功能,即在用户在文本框中输入时自动提示邮箱的后缀。这个功能对于提高用户体验尤其有用,因为它可以帮助用户快速准确地输入有效的电子邮件地址。 首先,我们需要...

    NET文本框输入显示相似记录信息

    在.NET开发中,文本框...通过以上步骤,你可以构建一个具备自动提示功能的.NET文本框,当用户输入时,实时显示与输入内容相似的记录信息。这种功能对于搜索框、筛选器或任何需要快速查找信息的场景都十分有用。

    jquery点击文本框提示标签自动补全_关键字标签value值提取

    总结,实现jQuery点击文本框提示标签自动补全并提取关键字标签的value值,需要理解jQuery的基本操作,结合合适的自动补全插件,以及良好的用户体验设计。在实际开发中,还可以根据项目需求进行更多定制和优化。

    jQuery文本框输入文字自动筛选代码.zip

    《jQuery文本框输入文字自动筛选代码详解》 在网页开发中,用户交互是提升用户体验的重要环节,其中一种常见的交互方式是文本框输入时的实时筛选功能。jQuery库因其简洁易用的API,常被用于实现这类功能。本篇文章...

Global site tag (gtag.js) - Google Analytics