1, this is a relatively simple page, you can copy down can be used.
<!doctype html>
<meta charset= "Utf-8" >
<title>jquery UI AutoComplete (Autocomplete)-Default features </title>
<link rel= "stylesheet" href= "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
<script src= "//code.jquery.com/jquery-1.9.1.js" ></script>
<script src= "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>
<link rel= "stylesheet" href= "Http://jqueryui.com/resources/demos/style.css" >
<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"
];
$ ("#tags"). AutoComplete ({
Source:availabletags
});
});
</script>
<body>
<div class= "Ui-widget" >
<label for= "Tags" > tags:</label>
<input id= "Tags" >
</div>
</body>
2. Actual combat auto-populate data:
(1) Page:
$ ("#account_name"). focus (function () {
var sel = $ (' #select '). Val ();
var auto_able =!$ (this). Data (' AutoComplete ');
if (auto_able)
{
$ (this). AutoComplete (
{
Autofocus:tru e,//automatically get focus
minlength:0,
Autofill:true,//To automatically fill the input box with the value of the user's current mouse when the user chooses. Default:false
Source: ' __url__/autocompleteaccount ',//This is the path, also the data source.
Select:function (event, UI) {
$ ("#account_name"). Val (Ui.item.label); window.location.href = "__url__/order?sel=" +sel+ "&account_id=" +ui.item.id;
return false;
}
}
);
}
});
Input Box:
placeholder= "Please enter your account name" autocomplete= "Off" value= "{$accountName}" >
(2). Controller:
Public Function Autocompleteaccount () {
$flag _arr = Array ();
if ($_get[' term ']) {
foreach ($this->_account as $key = + $ac) {
if (Stripos ($ac, trim ($_get[' term '))!== false)
$flag _arr[] = Array (
' id ' = $key,
' Label ' = $ac,
);
}
}
Echo Json_encode ($flag _arr); exit; In the JSON way
}
jquery Auto Fill input box