Simple example
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>AutocompleteOption</title>
<link rel= "stylesheet" type= "Text/css" href= "Themes/base/jquery.ui.all.css"/>
<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.core.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.widget.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.position.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.autocomplete.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
/* Initialize data source/*
var keys = ["JSP", "JavaScript", "jquery", "ASP", "asp.net", "PHP",];
$ (' #searchBox '). AutoComplete ({
Source:keys,
Minlength:2
});
});
</script>
<style>
body{padding:30px;}
</style>
<body>
<input id= "SearchBox"/>
</body>
Effect Chart:
In the code above, wrap the input box on the page as a jquery object when the page is initialized, and then wrap it as a auto-complete component using the AutoComplete () method, initializing its minimum response length options and data source options
2: Ways to Automate components
There are search, Open, focus, Select, close, and change events
Copy Code code as follows:
Function (event, UI) {
Event: Events object When the event is triggered
UI, is the user interface object, Ui.item is an object that contains the label and Value property
}
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>AutocompleteEvent</title>
<link rel= "stylesheet" type= "Text/css" href= "Themes/base/jquery.ui.all.css"/>
<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.core.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.widget.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.position.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.ui.autocomplete.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
/*
Initializing a data source
*/
var keys = ["C + +", "C #", "C",
"Java", "ee", "jsp", "JavaScript", "jquery",
"ASP", "asp.net",
"Ruby", "vb.net", "Visual Basic", "VB",
"Photo shop", "PHP",
"Flax", "flash"];
function GetValues (key) {
var ks = [];
if (key = = "") return to KS; Returns an empty collection if the keyword is an empty string
for (var i = 0; i<keys.length; i++) {
if (keys[i].indexof (key) = = 0) {
Ks[ks.length] = keys[i];
}
}
return KS;
}
$ (' #searchBox '). AutoComplete ({
Source: [],
Search:function (Event,ui) {
$ (' #searchBox '). AutoComplete (
"Option", "Source", GetValues ($ (this). Val ())
);
}
});
});
</script>
<style>
body{padding-top:30px;}
td{text-align:center; vertical-align:middle; padding:10px;}
#searchBox, #Search {padding:2px; font-size:15px;}
#searchBox {width:220px;height:17px;}
#Search {width:80px;}
</style>
<body>
<table border= "0" align= "center" >
<tr>
<TD colspan= "2" ></tr>
<tr>
<td><input id= "SearchBox"/></td>
<td><button id= "Search" >Search</button></td>
</tr>
</table>
</body>
Effect Chart:
