jQuery autocomplete UI with servlet is not returning any data

后端未结

关注

 1  422

I have been fiddling with this code fragment from past few hours but I am unable to understand how jQuery\'s autocomplete UI works. I followed this tutorial http://viralpate

相关标签:

1条回答

广开言路

2020-12-10 09:53

The servlet should return the autocomplete data as JSON. There a several options, I have opted for an array which contains an object with label/value properties:

@WebServlet("/autocomplete/*")
public class AutoCompleteServlet extends HttpServlet {
    @Override
    protected void doPost(final HttpServletRequest request,
            final HttpServletResponse response) throws ServletException,
            IOException {

        final List<String> countryList = new ArrayList<String>();
        countryList.add("USA");
        countryList.add("Pakistan");
        countryList.add("Britain");
        countryList.add("India");
        countryList.add("Italy");
        countryList.add("Ireland");
        countryList.add("Bangladesh");
        countryList.add("Brazil");
        countryList.add("United Arab Emirates");
        Collections.sort(countryList);

        // Map real data into JSON

        response.setContentType("application/json");

        final String param = request.getParameter("term");
        final List<AutoCompleteData> result = new ArrayList<AutoCompleteData>();
        for (final String country : countryList) {
            if (country.toLowerCase().startsWith(param.toLowerCase())) {
                result.add(new AutoCompleteData(country, country));
            }
        }
        response.getWriter().write(new Gson().toJson(result));
    }
}

to return the autocomplete data, you could use this helper class:

class AutoCompleteData {
    private final String label;
    private final String value;

    public AutoCompleteData(String _label, String _value) {
        super();
        this.label = _label;
        this.value = _value;
    }

    public final String getLabel() {
        return this.label;
    }

    public final String getValue() {
        return this.value;
    }
}

so in the servlet, the real data is mapped into a form suitable for jQuery's autocomplete. I have selected Google GSON to serialize the result as JSON.

Understanding and Implementing Jquery autocomplete with AJAX source and appendTo
How do you return a JSON object from a Java Servlet

As for the HTML document (implemented in a .jsp), pick the correct libraries, stylesheets and styles:

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"> </script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

        <script type="text/javascript" src="autoComplete.js"> </script>
    </head>

    <body>
        <form>
            <div class="ui-widget">
                <label for="country">Country: </label>
                <input id="country" />
            </div>
        </form>
    </body>
</html>

Related: jQuery autocomplete demo

I have put the Javascript functions in a separate file autoComplete.js:

$(document).ready(function() {
    $(function() {
        $("#country").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "/your_webapp_context_here/autocomplete/",
                    type: "POST",
                    data: { term: request.term },

                    dataType: "json",

                    success: function(data) {
                        response(data);
                    }
               });              
            }   
        });
    });
});

The autocomplete function uses an AJAX request to call the servlet. As the result of the servlet is suitable, it can be used as-is for the response.

What are the “response” and “request” arguments in jQuery UI Autocomplete's “source” callback?
jQuery autocomplete widget
jQuery ajax function

0 讨论(0)