AutocompleteControl
Jump to navigation
Jump to search
<script type="text/javascript">
var programLangs = [
"ActionScript",
"AppleScript",
"ASP.NET",
"BASIC",
"C",
"C++",
"C#",
"COBOL",
"Dart",
"Erlang",
"Fortran",
"Go",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby"
];
$("document").ready(function() {
$("#auto1").autocomplete({
source: getData,
autoFocus: true
});
function getData(req, callback) {
var result = [];
for (var i = 0; i < programLangs.length; i++) {
if (programLangs[i].substring(0, 1) == req.term.toUpperCase())
result.push(programLangs[i]);
}
callback(result);
};
});
</script>
<style>
/* the .ui class is predefined in the jquery library. this just overwrites it.*/
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<form>
<h1>Using the Autocomplete Control</h1>
<p>The autocomplete control provides suggestions to the user as they enter data into a field. This can be used to speed up data entry, guide the user toward entering a set of known default values, etc.</p>
<p>The list of suggestions can come from an array, a URL, or a function that you supply that can retrieve the data from wherever your application desires.</p>
<h3>Basic Autocomplete control</h3>
<label>Type the name of a programming language: </label><input id="auto1" type="text" />
</form>
</body>