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

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



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如附件

猜你喜欢

转载自patronli.iteye.com/blog/2323440
今日推荐