700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jquery.autocomplete 实现实时查询

jquery.autocomplete 实现实时查询

时间:2018-09-07 10:25:15

相关推荐

jquery.autocomplete 实现实时查询

之前做过一个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);});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。