java - jQuery autocomplete UI with servlet is not returning any data -
i have been fiddling code fragment past few hours unable understand how jquery's autocomplete ui works. followed tutorial http://viralpatel.net/blogs/tutorial-create-autocomplete-feature-with-java-jsp-jquery/ used same example instead of sending request jsp, used servlet. request reaches servlet "fetcher", executes nothing returned page. here's code.
public class fetcher extends httpservlet { [...] list<string> countrylist = new arraylist<string>(); string param = request.getparameter("term"); 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"); printwriter out = response.getwriter(); response.setcontenttype("text/plain"); response.setheader("cache-control", "no-cache"); for(string country : countrylist){ out.println(country); } [...] } javascript fragment in html:
<script> $(function() { $( "#tags" ).autocomplete({ source: "fetcher" }); }); </script> html form:
<label for="tags">tags: </label> <input id="tags" /> the examples on page seems written pro in jquery, http://jqueryui.com/autocomplete/#default . please, tell how works, can use in other places.
the servlet should return autocomplete data json. there several options, have opted array contains object 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 json response.setcontenttype("application/json"); final string param = request.getparameter("term"); final list<autocompletedata> result = new arraylist<autocompletedata>(); (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 autocomplete data, use 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 servlet, real data mapped form suitable jquery's autocomplete. have selected google gson serialize result json.
related:
- understanding , implementing jquery autocomplete ajax source , appendto
- how return json object java servlet
as html document (implemented in .jsp), pick correct libraries, stylesheets , 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 javascript functions in 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 ajax request call servlet. result of servlet suitable, can used as-is response.
related:
Comments
Post a Comment