Sometimes we need to implement autocomplete feature to input field for searching purpose. We can do this by using "autocomplete()" with jQuery.
Example: In the below example I have created an array of country names and passed that as source to autocomplete function. I've applied the autocomplete feature to search box.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$(function() {
var countryList = [
"Afghanistan",
"Australia",
"Belgium",
"Brazil",
"Canada",
"Colombia",
"Denmark",
"Egypt",
"France",
"Germany",
"Hungary",
"India",
"Italy",
"Kenya",
"Malaysia",
"Netherlands",
"Poland",
"Russia",
"South Africa",
"Thailand",
"Ukraine",
"Vietnam",
"Zimbabwe"
];
$( "#search-box" ).autocomplete({
source: countryList,
autoFocus:true,
messages: {
noResults: '',
results: function() {}
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="search-box" >Search</label>
<input id="search-box">
</div>
</body>
</html>
0 Comment(s)