Difference between revisions of "AutocompleteControl"
Jump to navigation
Jump to search
(Created page with "<pre> <script type="text/javascript"> var programLangs = [ "ActionScript", "AppleScript", "ASP.NET", "BASIC",...") |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
<pre> | <pre> | ||
<script type="text/javascript"> | |||
var programLangs = [ | var programLangs = [ | ||
"ActionScript", | "ActionScript", | ||
| Line 27: | Line 27: | ||
$("document").ready(function() { | $("document").ready(function() { | ||
$("#auto1").autocomplete({ | $("#auto1").autocomplete({ | ||
source: | source: getData, | ||
autoFocus: true | autoFocus: true | ||
}); | }); | ||
function getData(req, callback){ | function getData(req, callback) { | ||
var result =[]; | var result = []; | ||
for(var i=0; i < programLangs.length; i++){ | for (var i = 0; i < programLangs.length; i++) { | ||
if(programLangs[i].substring) | if (programLangs[i].substring(0, 1) == req.term.toUpperCase()) | ||
result.push(programLangs[i]); | |||
} | } | ||
callback(result); | |||
}; | }; | ||
| Line 41: | Line 43: | ||
</script> | </script> | ||
<style> | <style> | ||
/* the .ui class is predefined in the jquery library. this just overwrites it.*/ | |||
.ui-autocomplete { | .ui-autocomplete { | ||
max-height: 200px; | max-height: 200px; | ||
| Line 60: | Line 63: | ||
</body> | </body> | ||
</pre> | </pre> | ||
[[Widgets]] | |||
Latest revision as of 17:54, 6 January 2017
<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>