jQuery UI autocomplete
Most of the web developers are familiar with the auto completion text feature available in browsers, search controls and other controls. The auto completion feature is when you start typing some characters in a control, the matching data is loaded automatically for you. Use the autocomplete() method to create aa input that automatically completes input strings by comparing the prefix being entered to the prefixes of all strings in a maintained source. The jQueryUI Autocomplete is attached to the input control using the autocomplete() method. We supply an object literal as an argument to the method, which configures the source option and the select and change event callbacks. The source option is used to tell the widget where to get the suggestions for the Autocomplete menu from.
var autoTags = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
$( "#auitoText" ).autocomplete({
source: autoTags
});
<input id="auitoText">
We use a function as the value of this option, which accepts two arguments; the first is the term entered into the < input >, the second is a callback function which is used to pass the suggestions back to the widget.
Browser ViewEnter something here :
<html>
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var autoTags = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
$( "#auitoText" ).autocomplete({
source: autoTags
});
} );
</script>
</head>
<body>
<p>Enter something here : <input id="auitoText"></p>
</body>
</html>
Related Topics