JQuery UI AutoComplete (2)

1, autocomplete get background data

First introduce the CSS and JS file, and the corresponding HTML code is as follows:

<Linkhref=".. /css/jquery-ui.css "rel= "stylesheet" /><Scripttype= "Text/javascript"src=".. /js/jquery-1.9.1.min.js " ></Script><Scripttype= "Text/javascript"src=".. /js/jquery-ui.js "  ></Script> <label for= "Language">Search:</lable><inputID= "Language"name= "Language"type= "text">

The corresponding JS code is as follows:

// directly request the backend to return the JSON data and then display it    $ ("#language"). AutoComplete ({          "/autocomplete.html"    });

The corresponding background Java code:

protected voidDoget (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {doPost (request, response); }    protected voidDoPost (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException {//parameters sent by the front endString param= request.getparameter ("term"); Response.setheader ("Access-control-allow-origin", "*"); Response.setheader ("Access-control-allow-methods", "*"); Response.setheader ("Access-control-allow-headers", "X-requested-with,content-type"); Response.setcharacterencoding ("Utf-8"); Response.setcontenttype ("Text/html;charset=utf-8"); List<string > namelist=NewArraylist<>(); Namelist.add (A); Namelist.add ("B"); Namelist.add (C); Namelist.add ("D"); String[] Arr={"Chinese", "中文版", "Spanish", "Russian", "French", "Japanese", "Korean", "German"}; //converts an array or collection object to JSON back to the front endPrintWriter printwriter=Response.getwriter ();        Printwriter.print (Jsonarray.tojson (arr));    Printwriter.flush (); }

When you enter a character in the input box, a GET request is defaulted and the character is passed as a parameter to the backend. At this point we can filter the required data according to the parameters to return to the front-end display, such as: when the input C will occur when the following request to the server

The returned data is as follows:

It is then displayed in the input box because there is no filtering, so all the data is returned to the front

2, AutoComplete through the method to obtain data

The HTML and background code is the same, the corresponding JS code is as follows:

$ ("#language"). AutoComplete ({//using functions to get and manipulate data sourcesSourcefunction(Request, response) {//the Request object has only one term attribute, corresponding to the text entered by the user            //response is a function that, after you have processed and fetched the data yourself, give the JSON data to the function to process it so that the AutoComplete can display the list according to the data$.ajax ({type:"POST", URL:"/autocomplete.html", data: {"Term": Request.term}, Success:function(Result) {//Convert json to string                //Response (json.stringify (result));                    //Convert string to JSONResponse (Json.parse (result)); }, Error:function(HttpRequest) {}}) }    });

At this point, the request is sent to the backend via Ajax, then the returned results are converted to JSON through response (Json.parse), and the data is displayed. The arguments to get the input box are passed to the backend via Request.term. The corresponding effect is the same as the first type.

JQuery UI AutoComplete (2)