Jquery Autocomplete 和 Spring2.5.6 的问题答案

【问题标题】：Problems with Jquery Autocomplete and Spring2.5.6Jquery Autocomplete 和 Spring2.5.6 的问题
【发布时间】：2012-07-30 14:42:46
【问题描述】：

我正在尝试使用 JQuery 和 Spring 2.5.6 显示自动完成列表，但我正在将 json 发送到前端，但我无法显示它。

 $(function() {
    $("#globalSearch").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "${pageContext.request.contextPath}/autoSearch.htm",
                data: {
                    term : request.term
                },
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    // this is the alert output its displaying:{"list":["ernst","ernst&nbsp"]} 
                    alert(JSON.stringify(data, null, 4));
                    response($.map(data, function(item) {
                        //its not alerting anything here
                        alert(JSON.stringify(item, null, 4));
                        return{
                            value: item.list
                        };
                    }));
                }
            });
        }
    });
});

这是我的弹簧控制器代码：

@RequestMapping(method = RequestMethod.GET, value = "/autoSearch.htm")
public ModelAndView autoSearch(
        @RequestParam(value = "term", required = false) String term
       ) throws ParseException, IOException {

    if (logger.isDebugEnabled()) {
        logger.debug("inventoryHandler called");
    }

    Map<String, Object> model = new HashMap<String, Object>();
    int i = 0;
    model.put("list", getBaseModel().getSearchServiceBean().autoCompleter(term));
    return new ModelAndView("jsonView", model);
}

谁能告诉我如何显示自动完成列表。

提前致谢，

最好的问候，拉贾。

【问题讨论】：

标签： javascript jquery json spring-mvc

【解决方案1】：

在 spring 3.x 之后，您将使用 @ResponseBody 注释，例如：

public @ResponseBody List<String> autocomplete(@RequestParam(value = "term", required = false) String term) {
    //Go get your results for the autocomplete term
    List<String> termResults = ...;

    return termResults;
}

在我看来，您的响应以错误的内容类型发送回客户端，并被解释为 text/html 而不是 JSON。您可以在控制器中设置响应内容类型并写入 JSON 字符串吗？

String json = "{\"list\":[\"ernst\",\"ernst&nbsp\"]}";
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
response.setContentLength(json.length());
writer.write(json);

【讨论】：

其实我是在前端获取json..只是不知道如何返回..但终于找到了解决方案，如下所示。

【解决方案2】：

我终于找到了如下所示的解决方案。

 $(document).ready(function() {
    $("#globalSearch").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "${pageContext.request.contextPath}/autoSearch.htm",
                data: {
                    globalSearch : request.term
                },
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    response($.map(data.list, function(value) {
                        return{
                            label: value,
                            value: value
                        };
                    }));
                }
            });
        }
    });
});

在输入字段中，name 和 id 必须相同

 <input type="text" name="globalSearch" id="globalSearch"/>

【讨论】：

【解决方案3】：

@RequestMapping(method = RequestMethod.GET, value = "/autoSearch.htm") 公共模型和视图自动搜索（ @RequestParam(value = "term", required = false) 字符串术语 ) 抛出 ParseException, IOException {

    if (logger.isDebugEnabled()) {
        logger.debug("inventoryHandler called");
    }

    Map<String, Object> model = new HashMap<String, Object>();
    model.put("list", getBaseModel().getSearchServiceBean().searchAutoComplete(term));
    return new ModelAndView("jsonView", model);
}

并且在views.properties文件中的view应该设置为

jsonView.(class)=org.springframework.web.servlet.view.json.JsonView

在 javascript 中，自动完成功能将使用以下代码：

        $("#searchEmail").autocomplete({
            source: function(request, response) {
                ajaxCall(request, response);
            },
            select: function(event, ui) {
                $("#searchEmail").val(ui.item.value);
                $("#emailSearch-form").submit();
            }
        });

        function ajaxCall(request, response) {
            $.ajax({
                url: "${pageContext.request.contextPath}/autoSearch.htm",
                data: {
                    term : request.term
                },
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    response($.map(data.list, function(item) {
                        return{
                            label: item,
                            value: item
                        };
                    }));
                }
            });
        }

【讨论】：