Question

I am trying to display autocomplete list using JQuery and Spring 2.5.6, but I am getting json to the front end, but I can’t able to display it.

 $(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
                        };
                    }));
                }
            });
        }
    });
});

here is my spring controller code:

@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);
}

can anyone please tell me how can I display the autocomplete list.

Thanks in Advance,

Best Regards,
Raja.

Answer 1

@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>();
    model.put("list", getBaseModel().getSearchServiceBean().searchAutoComplete(term));
    return new ModelAndView("jsonView", model);
}

and in views.properties file view should be set like

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

and in javascript the autocomplete will work by using the following code:

        $("#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
                        };
                    }));
                }
            });
        }