jquery-autoComplete 处理返回的json对象问题

     由于项目中需要autocomplete，且项目中一直使用jquer的框架。所以继续选用jquery 的插件jquery-autocomplete，看到jquery-autocomplete自带的demo感觉很是容易但是在使用中却没有想象中的那么顺手。

     关于Jquery-autocomplete处理response中是Json对象时当成字符串处理。查了一些资料终于找到处理方法先看代码：

  $("#fromtCity").autocomplete("../searchCity.do", {
     multiple: true,  
     width:150,  
     max:50,  
     multipleSeparator: ' ', 
     dataType: 'json',  
    //加入对返回的json对象进行解析函数，函数返回一个数组    
     parse: function(data) {
       var rows = [];
       for(var i=0; i<data.length; i++){
        rows[rows.length] = { 
          data:data[i].nameEn +"-"+data[i].nameCn, 
          value:data[i].cityCode, 
          result:data[i].nameCn 
          }; 
        }
     return rows;
       },
     formatItem: function(row, i, n) {
        return row;      
    }
  });

 就是在出来绑定中添加一个对返回的json对象进行解析函数。

评论

9 楼 judyfun 2014-12-22  

太棒了。。。。提供的正式我想要的。

8 楼 mayi2010 2011-11-04  

3楼写的很完整 提个问题 如果想传多个参数 怎么设置

7 楼 mayi2010 2011-11-04  

这帖子 必须得顶

6 楼 kelly_zhang921 2011-08-19  

boogie 写道

JavaScript:
    $.getJSON("my_backend.php", function(data) {
        $("#input_box").autocomplete(data);
    });

HTML:
    <input id="input_box" />

这个比必须得说一下， autocomplete官方提供的文档太不全面了，autocomplete(data/url[,options]);第一个参数是url的时候与是local 数据的时候内部处理流程很不一样，这个仁兄提供的方法是最简洁的，

5 楼 shuperjolly 2010-07-05  

其实也不一定要这样子啊，这样子又多出一个函数来了，可以直接根据自己的特殊情况修改autocomplete.js里面的parse函数呀，这比自己再写一个函数要来得简单。

function parseData(data) {
		if (!data) return null;
		var parsed = [];
		var rows = data.split(options.lineSeparator);
		for (var i=0; i < rows.length; i++) {
			var row = $.trim(rows[i]);
			if (row) {
				parsed[parsed.length] = row.split(options.cellSeparator);
			}
		}
		return parsed;
	};

在385行。。。只要里面的代码修改好了里面根本连format类参数都不用修改，省脑经多了。

4 楼 ltl3884 2009-11-09  

十分感谢 楼主的代码
另外关于jquery的autocomplete中文介绍看我的文章http://ltl3884.iteye.com/admin/blogs/512738

3 楼 sageivy 2009-10-28  

非常感谢楼主clin8888，查遍互联网，你的方法解决了我的问题，我一般不回贴的。
我描述一下我解决的问题的正确做法：
action处理：

/**
	  * 查询城市名称
	  * @return
	  * @throws Exception
	  */
	 public void queryCityName() throws Exception{
		 HttpServletRequest request = Struts2Utils.getRequest();
		 cityName =request.getParameter("q");
		 cityName= new String(cityName.getBytes("ISO-8859-1"), "UTF-8");
		 List<City> citys= cityManager.queryCityName(cityName);
		 List<CityDTO> citydtos=new ArrayList<CityDTO>();
		 for(City c:citys){
			 CityDTO c2=new CityDTO();
			 BeanUtils.copyProperties(c2,c);
		 }
		 Struts2Utils.renderText(JsonUtil.getJSONString(citydtos));
	}

javascript 代码

function parseFn(data) {   
        var rows = [];   
        for(var i=0; i<data.length; i++){   
           rows[rows.length] = {    
               data:data[i],    
               value:data[i].code,    
               result:data[i].name    
           };    
         }   
        return rows;   
     } 
	 var options = {minChars: 1,   
		            max: 500,   
		            width: 250, 
		            matchSubset:false,
		            matchContains: true,  
		            extraParams:{q:function(){return $("#this").val();}},
		            dataType: 'json', 
		            parse:parseFn, 
		            formatItem: function(row,i,max){return  row.name; },   
		            formatMatch: function(row){return row.spell + " "+row.simpleName + " "+ row.name;},   
		            formatResult: function(row){return row.name; }
				   }
$("#StartCity").autocomplete("${ctx}/manager/system/shop/queryCityName.shtml", options)
			   .result(function(event, data, formatted){
			$("#StartCityId").val((data!=null&&null!=data.id)?data.id:"-1");   
});

代码经过测试完全正确！

2 楼 helloqidi 2009-08-17  

非常感谢，您的解决方法比这个更有效！
http://pan-java.iteye.com/blog/326199

1 楼 boogie 2009-05-26  

JavaScript:
    $.getJSON("my_backend.php", function(data) {
        $("#input_box").autocomplete(data);
    });

HTML:
    <input id="input_box" />