Home > Developer > Web Develop
See this tutorial today and share it for beginners to learn
AutoComplete after the focus is taken, as the user types, a list of content that can be found in the data source of the subscription and matches what has been entered is available for the user to select.
This can be used as previously entered content can also be used as auto-fill related content, such as the city name, automatically populate the ZIP code and so on.
You can use local data sources or remote data sources, local data generally use small data sets, such as 50 Records of the address book, remote data sources are generally to protect a large number of records of the database.
Basic usage
In this example, to use the basic usage of AutoComplete, a list of languages is defined by a local data source (array), and the language that contains the letter is displayed as a list after the user enters the letter:
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
Ten <script>
$ (function () {
var availabletags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C + +",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
35];
$ ("#tags"). AutoComplete ({
Panax Notoginseng Source:availabletags
38});
39});
</script>
<body>
<div class= "Ui-widget" >
<label for= "tags" >tags: </label>
<input id= "tags"/>
</div>
</body>
Intonation support
Some languages support intonation characters, such as those in J?rn, and you want to be able to display the contents of a containing when you enter O, AutoComplete supports using function to define the Source property:
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
Ten <script>
$ (function () {
var names = ["J?rn zaefferer",
"Scott González",
"John Resig"];
15
var Accentmap = {
17 "á": "A",
"?": "O"
19};
var normalize = function (term) {
* var ret = "";
(var i = 0; i < term.length; i++) {
RET + = Accentmap[term.charat (i)]
24 | | Term.charat (i);
25}
return ret;
27};
28
$ ("#developer"). AutoComplete ({
Source:function (Request, Response) {
var matcher
+ = new RegExp ($.ui.autocomplete
Escaperegex (request.term), "I");
Response ($.grep (names, function (value) {
Value = Value.label
36 | | Value.value
37 | | Value
Matcher.test return (value)
39 | | Matcher.test (normalize (value));
40}));
41}
42});
43});
</script>
<body>
<div class= "Ui-widget" >
<form>
<label for= "Developer" >developer: </label>
<input id= "Developer"/>
Wuyi </form>
</div>
</body>
Classification support
This example provides a simple extension of the AutoComplete component that implements a custom Custom.catcomplete UI component to support AutoComplete classification support. Custom components are interesting to see in the jquery widget Factory. There's no need to customize the UI component, and if you want, you can find out if someone has already implemented the UI component you need, it's not a good way to customize the UI components, and using widgets to factory custom components is not very intuitive (because JavaScript uses a "prototype" Object-oriented approach, rather than the usual object-oriented approach to using 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
Ten <style>
ui-autocomplete-category {
Font-weight:bold;
padding:. 2em. 4em;
margin:. 8em 0.2em;
line-height:1.5;
16}
</style>
<script>
$.widget ("Custom.catcomplete", $.ui.autocomplete, {
_rendermenu:function (UL, items) {
var = this,
Currentcategory = "";
$.each (items, function (index, item) {
if (item.category! = currentcategory) {
Ul.append ("<li class= ' ui-autocomplete-category ' >"
+ item.category + "</li>");
Currentcategory = item.category;
28}
That._renderitemdata (UL, item);
30});
31}
32});
</script>
<script>
$ (function () {
The var data = [
PNS {label: "Anders", Category: "},
* Label: "Andreas", Category: "},
antal {label: ""}, Category: "},
{label: "annhhx10", Category: "Products"},
* Label: "Annk K12", Category: "Products"},
{label: "Annttop C13", Category: "Products"},
Anders {label: "Andersson", Category: "People"},
{label: "Andreas Andersson", Category: "People"},
{label: "Andreas Johnson", Category: "People"}
46];
47
$ ("#search"). Catcomplete ({
delay:0,
Source:data
51});
52});
</script>
<body>
<label for= "Search" >search: </label>
<input id= "Search"/>
</body>
Where 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
