Home > Developer > JavaScript
After the AutoComplete obtains the focus, you can find the list of content that matches the entered content in the subscribed data source for the user to choose.
This can be used as a previously entered content or as an automatic filling of relevant content, such as automatically filling the zip code according to the city name.
You can use local data sources or remote data sources. Local data generally uses small data sets, such as address books containing 50 records. Remote Data sources generally protect databases with a large number of records.
Basic usage
In this example, the basic usage of AutoComplete is defined by using the local data source (array). After you enter a letter, the language containing the letter is displayed as a list:
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9
10 <script>
11 $ (function (){
12 var availableTags = [
13 "ActionScript ",
14 "AppleScript ",
15 "Asp ",
16 "BASIC ",
17 "C ",
18 "C ++ ",
19 "Clojure ",
20 "COBOL ",
21 "ColdFusion ",
22 "Erlang ",
23 "Fortran ",
24 "Groovy ",
25 "Haskell ",
26 "Java ",
27 "JavaScript ",
28 "Lisp ",
29 "Perl ",
30 "PHP ",
31 "Python ",
32 "Ruby ",
33 "Scala ",
34 "Scheme"
35];
36 $ ("# tags"). autocomplete ({
37 source: availableTags
38 });
39 });
40 </script>
41
42 <body>
43 <div class = "ui-widget">
44 <label for = "tags"> Tags: </label>
45 <input id = "tags"/>
46 </div>
47 </body>
48
Tone support
Some languages support tone characters, such as örn in J örn, and want to display the content that contains ös when inputting o. AutoComplete supports defining the Source attribute using function:
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9
10 <script>
11 $ (function (){
12 var names = ["J örn Zaefferer ",
13 "Scott González ",
14 "John Resig"];
15
16 var accentMap = {
17 "á": "",
18 "ö":" o"
19 };
20 var normalize = function (term ){
21 var ret = "";
22 for (var I = 0; I <term. length; I ++ ){
23 ret + = accentMap [term. charAt (I)]
24 | term. charAt (I );
25}
26 return ret;
27 };
28
29 $ ("# developer"). autocomplete ({
30 source: function (request, response ){
31 var matcher
32 = new RegExp ($. ui. autocomplete
33. escapeRegex (request. term), "I ");
34 response ($. grep (names, function (value ){
35 value = value. label
36 | value. value
37 | value;
38 return matcher. test (value)
39 | matcher. test (normalize (value ));
40 }));
41}
42 });
43 });
44 </script>
45
46 <body>
47 <div class = "ui-widget">
48 <form>
49 <label for = "developer"> Developer: </label>
50 <input id = "developer"/>
51 </form>
52 </div>
53 </body>
54
CATEGORY support
In this example, we provide a simple extension AutoComplete component to implement a custom M. catcomplete UI component to support AutoComplete classification. For more information about custom components, see jQuery's Widget Factory. Generally, you do not need to customize the UI components. If necessary, you can find on the website whether someone has implemented the UI components you need, the method for using the Widget Factory to customize components is not very intuitive (this is because JavaScript uses the object-oriented method for "prototype", rather than the object-oriented method for common classes ).
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9
10 <style>
11. ui-autocomplete-category {
12 font-weight: bold;
13 padding:. 2em. 4em;
14 margin:. 8em 0. 2em;
15 line-height: 1.5;
16}
17 </style>
18 <script>
19 $. widget ("custom. catcomplete", $. ui. autocomplete ,{
20 _ renderMenu: function (ul, items ){
21 var that = this,
22 currentCategory = "";
23 $. each (items, function (index, item ){
24 if (item. category! = CurrentCategory ){
25 ul. append ("<li class = 'ui-autocomplete-category '>"
26 + item. category + "</li> ");
27 currentCategory = item. category;
28}
29 that. _ renderItemData (ul, item );
30 });
31}
32 });
33 </script>
34 <script>
35 $ (function (){
36 var data = [
37 {label: "anders", category :""},
38 {label: "andreas", category :""},
39 {label: "antal", category :""},
40 {label: "annhhx10", category: "Products "},
41 {label: "annk K12", category: "Products "},
42 {label: "annttop C13", category: "Products "},
43 {label: "anders andresson", category: "People "},
44 {label: "andreas andresson", category: "People "},
45 {label: "andreas johnson", category: "People "}
46];
47
48 $ ("# search"). catcomplete ({
49 delay: 0,
50 source: data
51 });
52 });
53 </script>
54
55 <body>
56 <label for = "search"> Search: </label>
57 <input id = "search"/>
58 </body>
59
Custom. catcomplete is a custom UI component, so $ ("# search"). catcomplete uses catcomplete instead of autocomplete.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
