jquery.autocomplete 实现实时查询

最新推荐文章于 2025-07-09 13:40:33 发布

大志强

最新推荐文章于 2025-07-09 13:40:33 发布

阅读量5.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小小的天，组成大大的梦想文章标签： jquery autocomplete 实时

本文链接：https://blog.youkuaiyun.com/zhenqian52/article/details/73741981

小小的天，组成大大的梦想专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个基于前后端交互实现的实时Autocomplete功能。该功能在输入框中输入内容时能够实时提供匹配建议，并且能够处理大量数据而不会降低响应速度。文章详细介绍了控制器层的实现方法，包括从前台接收参数、后台数据处理及字符串拼接，最后返回给前端展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做过一个autocomplete的例子，但是用的是从数据中把数据全部取出来，然后进行匹配，如果取出的数据量比较少，用这个方法可以。但是如果数据量很大，则会造成响应速度很慢，所以还是弄了个实时的例子

页面：

课程代码：<input type="text"  name="qfkcdm" id="qfkcdm"/>
<input type="hidden" name="fkcdm" id="fkcdm"/>

首先是controller 层（比较菜，按道理这个层不应该写过多的代码）

    public @ResponseBody Object kkkcAuto(HttpServletRequest request){
    	String aparam = request.getParameter("aparam");
    	List<ExamKkkc> kkkclist = this.examService.getAutoKkkc(aparam);
    	 String date="";
    	 String jsdata="";
		 if(kkkclist!=null&&kkkclist.size()>0){
		  for(int i=0;i<kkkclist.size();i++){
				 date+=",{'name':'"+kkkclist.get(i).getKcmc()+"', 'to':'"+kkkclist.get(i).getKcdm()+"'}";
			  }
		  jsdata  = "["+date.substring(1)+"]";
		  }
    	return jsdata;
    }

我这个地方根据前台穿过来的一个参数，在后台进行获取list操作，获取到数据后，进行拼串处理，处理过后传到前台，这个时候传的是String类型的。

 $("#qfkcdm").autocomplete('<%=request.getContextPath() %>/manage/sys/exam/kkkcAuto.htm',{
  	    		minChars: 1,
  	        	max:10,//待定，显示记录数量
  	       		width: 200, 
  	        	matchContains: true,
  	        	autoFill: false,
  	        	//如果需要另外传值给action的话可以用这样的方式
  	         	extraParams:{   
  	         		aparam: function(){   
 	               		return $("#qfkcdm").val(); 
 					} 
  	       		}, 
  	       		//如果传过来的不是对象类型，必须进行json转化
                        parse: function(data) {
  	                return $.map(eval(data), function(row) {
  	                return {
  	                    data: row,
  	                    value: row.name,
  	                    result: row.to
  	                }
  	            })
  	            },
                    //如果在js中是通过对象的方式接受，用下面这种处理方式，待测试
                   /* parse: function(test){//进行对返回数据的格式处理
  					//content为我action里面定义的值
  	            	data = test;
  	              	var rows = [];
  	            	for(var i=0; i<data.length; i++){
  						var examkkkc = data[i];
  	                   	rows[rows.length] = {
  	                   	data:examkkkc.kcmc,
  	                   	value:examkkkc.to,
  	                   	result:examkkkc.kcmc
  	            		};
  	               	}   
  	            	
  	               	return rows;
  	    		}, */
  	    		formatItem: function(item) {
                      return "\"" + item.name + "\" [" + item.to + "]";
  	    			//return  "\""+ row.name + + "\" [" + row.to + "]";
                  },
                  formatMatch: function(row, i, max) {
                      return row.name + " " + row.to;
                  },
                  formatResult: function(row) {
                      return row.name;
                  }
              }).result(function(event,data,formatted){
  				$('#fkcdm').val(data.to);
  	     	});