jQiueryUI中关于AutoComplete的说明
什么是AutoComplete及使用场景
AutoComplete：文本框的自动填充控件AutoComplete，类似于Google搜索输入框提供的功能。为什么有这样的功能呢，因为用户都很懒
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 could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.
如果选项数据量很少，比如10条以内，个人觉得使用radio或者select更好。
AutoComplete使用样例（本地静态数据）
Js代码
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 -->
选项数据的三种提供方式（本地数组、指定URL、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 various 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）
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.
指定URL来获取选项数据
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 should use for filtering the results. The data itself can be in the same format as the local data described above.
Js代码
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>
下面使用firebug得到的search.php部分响应内容
Js代码
1. [ { "id": "Ciconia ciconia", "label": "White Stork", "value": "White Stork" }, { "id"
补充：web前端 , JavaScript ,
