jQuery Autocomplete
AutoComplete
AutoComplete enhances user search experience by assisting user while typing the search query.. also known as Type Ahead or Predictive search.
It provides a list of possible values when a user types into an input field.
AutoComplete Example
For example, in a search for months of the year, if you type JU, it will suggest June and July.
Start typing a month name in the following textbox :
Code for Auto-complete search
<!DOCTYPE html>
<html>
<head>
<title>Auto complete</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var months = [
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
];
$("#month").autocomplete({
source: months
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="month">Month Name Type-Ahead: </label>
<input id="month">
</div>
</body>
</html>
In this example, we are using an Array of Strings as source for the AutoComplete textbox.
We can also use a URL or even data from callback function.
Any field that can receive input can be converted into Autocomplete as either an input element, select element, or textarea element.
You may also like :
© 2016, https:. All rights reserved. On republishing this post, you must provide link to original post
