JQuery Autocomplete对象数组

时间:2013-07-25 13:06:37

标签: json jsp spring-mvc response jquery-autocomplete

我使用Spring MVC并尝试从我的控制器发送一个对象数组来使用JQuery自动完成。我已经设法使用数组List<String>。但我无法使用它来处理一组对象。我需要将标签和值作为JQuery自动完成中的不同字符串。

我希望执行以下操作,根据Autocomplete JQuery UI:

[ { label: "Label1", value: "Value1" }, ... ]

我已经设法让它在JS中工作

var obj = jQuery.parseJSON('[{"label":"Label1","value":"Value1"},{"label":"Label2","value":"Value2"}]');

但是当我在控制器中创建它时,我无法将其作为字符串发送到自动完成(由于自动完成中的成功将不会触发,并且响应(数据)将不会运行)。所以我尝试创建如下的东西。

    @RequestMapping(params = {"type=itemType"})
public @ResponseBody List<DataObject> returnItemType(@RequestParam("itemType") String itemType) {
    List<DataObject> objList = new ArrayList<DataObject>();
    objList.add(new DataObject("Label1", "Value1"));
    objList.add(new DataObject("Label2", "Value2"));
    return objList;
}

  private static class DataObject {
    private String label;
    private String value;

    public DataObject(String label, String value) {
      this.label = label;
      this.value = value;
    }

    public String toString() {
      return "label = " +label+ ", value = " +value;
    }
  }

如果我添加Gson return gson.toJson(objList);

JSON在firebug中看起来不错。但是,自动完成中的成功将不会运行,并且response(data)将不会运行Gson中的字符串的原因。

自动完成的JS

        $(function() {
    $("#itemType").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url:         "autocomplete.do",   
                    dataType:    "json",
                    cache:       true,
                    contentType: "application/json; charset=utf-8",
                    data: { 
                        "type"   : "itemType",
                        "itemType" : $("#itemType").val()
                    },
                    success: function(data) {
                        response(data);
                    }

                });
            },
            select: function(event, ui) {  
                $("#itemType").val(ui.item.value); 
                $("#orderItemFilterForm").submit(); 
            },  
            minLength: 0
    });
    $('#itemType').click(function(){ 
        $(this).val("");
        $(this).data("autocomplete").search($(this).val()); 
    });         
});

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

在我的网络应用程序中,我曾经从获取数据,如下所示:

success:function(data){
 data=eval("("+data+")");
console.log(data.label+"\t"+data.value);
}