JQuery getting started tutorial (25): jQuery UI Autocomplete example (3)

When you enter AutoComplete, you can give a prompt based on the user input. The data source can be local or remote. The DataSource of AutoComplete can use a Function. In this article, we use JSONP to query the Function.
When the data source is Function, its Function is defined:
Function (Object request, Function response (Object data ))
Request is a request that contains a term attribute, Which is input by the current user.
Response is a callback function, which has a parameter data to indicate the user's data. This value should be filtered according to the input term.
This example uses the Web Service provided by genames. You can query the name of a city in the world. Use the. ajax function provided by jQuery to access this Web Service.

1 $ ("# city"). autocomplete ({

2 source: function (request, response ){

3 $. ajax ({

4 url: "http://ws.geonames.org/searchJSON ",

5 dataType: "jsonp ",

6 data :{

7 featureClass: "P ",

8 style: "full ",

9 maxRows: 12,

10 name_startsWith: request. term

11 },

12 success: function (data ){

13 response ($. map (data. geonames, function (item ){

14 return {

15 label: item. name + (item. adminName1? ","

16 + item. adminName1: "") + "," + item. countryName,

17 value: item. name

18 };

19 }));

20}

21 });

22 },