Description of AutoComplete in jQiueryUI

What is AutoComplete and use cases?
AutoComplete: the AutoComplete Automatic Filling control of the text box, similar to the function provided by the Google search input box. Why is there such a function, because users are very lazy?
 
Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. by entering more characters, the user can filter down the list to better matches.
This can be used to enter previous selected values, for example you cocould use Autocomplete for entering tags, to complete an address, you cocould enter a city name and get the zip code, or maybe enter email addresses from an address book.
 
If the option data volume is small, for example, less than 10 items, I think it is better to use radio or select.
 
AutoComplete usage example (local static data)
 
Js Code
1. <meta charset = "UTF-8">
2.
3. <script>
4. $ (function (){
5. var availableTags = [
6. "ActionScript ",
7. "AppleScript ",
8. "Asp ",
9. "BASIC ",
10. "C ",
11. "C ++ ",
12. "Clojure ",
13. "COBOL ",
14. "ColdFusion ",
15. "Erlang ",
16. "Fortran ",
17. "Groovy ",
18. "Haskell ",
19. "Java ",
20. "JavaScript ",
21. "Lisp ",
22. "Perl ",
23. "PHP ",
24. "Python ",
25. "Ruby ",
26. "Scala ",
27. "Scheme"
28.];
29. $ ("# tags"). autocomplete ({
30. source: availableTags
31 .});
32 .});
33. </script>
34.
35.
36. <div class = "demo">
37.
38. <div class = "ui-widget">
39. <label for = "tags"> Tags: </label>
40. <input id = "tags"/>
41. </div>
42.
43. </div> <! -- End demo -->
 
 
Three options for data provision (local array, specified URL, and Callback)
You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.
Autocomplete can be customized to work with varous data sources, by just specifying the source option. A data source can be:
• An Array with local data
• A String, specifying a URL
• A Callback
Expected data format (Expected data format)
The data from local data, a url or a callback can come in two variants:
• An Array of Strings:
["Choice1", "Choice2"]
• An Array of Objects with label and value properties:
[{Label: "Choice1", value: "value1"},...]
The label property is displayed in the suggestion menu. the value will be inserted into the input element after the user selected something from the menu. if just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.
 
 
Specify a URL to obtain option data
When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. it can be on the same host or on a different one (must provide JSONP ). the Autocomplete plugin does not filter the results, instead the request parameter "term" gets added to the URL, which the server-side script shocould use for filtering the results. the data itself can be in the same format as the local data described above.
 
Js Code
1. <script>
2. $ (function (){
3. $ ("# tags"). autocomplete ({
4. source: "search. php ",
5. minLength: 2,
6. select: function (event, ui ){
7. // ui. item?
8. // "Selected:" + ui. item. value + "aka" + ui. item. id:
9. // "Nothing selected, input was" + this. value;
10 .}
11 .});
12 .});
13. </script>
 
Part of the search. php response content obtained by using firebug is as follows:
Js Code
1. [{"id": "Ciconia ciconia", "label": "White Stork", "value": "White Stork" },{ "id": "Netta rufina ", "label": "Red-crested Pochard", "value": "Red-crested Pochard "},
2. {"id": "Burhinus oedicnemus", "label": "Stone Curlew", "value": "Stone Curlew" },{ "id": "Galerida cristata ", "label": "Crested Lark", "value": "Crested Lark "},
3. {"id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" },{ "id": "Circus aeruginosus ", "label": "Western Marsh Harrier", "value": "Western Marsh Harrier "},
4. {"id": "Podiceps cristatus", "label": "Great Crested Grebe", "value": "Great Crested Grebe"}]
 
 
Use callback functions to provide option data
Callback functions are mainly used in two ways:
1. filter/filter the local option data;
2. Use ajax to obtain option data from the remote end;
 
The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:
• A request object, with a single property called "term", which refers to the value currently in the text input. for example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo ".
• A response callback, which expects a single argument to contain the data to suggest to the user. this data shoshould be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties ). it's important when providing a custom source callback to handle errors during the request. you must always call the response callback even if you encounter an error. this ensures that the widget always has the correct state.
The label is always treated as text, if you want the label to be treated as html you can use Scott Gonz ález 'html extension. the demos all focus on different variations of the source-option-look for the one that matches your use case, and take a look at the code.
 
The sample code for retrieving json Data Using ajax. request. term is the content entered by the user.
 
Js Code
1. $ (function (){
2. $ ("# tags"). autocomplete ({
3. source: function (request, response ){
4. $. ajax ({
5. url: "searchAction! Search. action ",
6. type: "POST ",
7. data :{
8. term: request. term
9 .},
10. dataType: "json ",
11. success: function (rsp ){
12. response (rsp & rsp. data )? Rsp. data: []); // assume that the option data is in rsp. data
13 .},
14. error: function (){
15. response ([]); // response is required if an error occurs. Otherwise, the "busy" icon will keep turning.
16 .}
17 .});
18 .},
19. minLength: 2,
20. select: function (event, ui ){
21. // ui. item? Ui. item. value: this. value
22 .}
23 .});
24 .});

 

From coding1688