jQuery UI Autocomplete | Client Side
Here we are using jQuery ui autocomplete.
The Autocomplete provides suggestions while you type into the TextBox and enable user to quickly find and select options.
<html>
<head>
<title>jQuery UI Autocomplete</title>
<script src="Scripts/Jquery-ui/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/Jquery-ui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link href="Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
<scripttype="text/javascript">
$(document).ready(function() {
varstateList = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar",
"Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh",
"Jammu and Kashmir","Jharkhand","Karnataka","Kerala",
"Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram",
"Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu",
"Tripura","Uttar Pradesh","Uttarakhand","West Bengal"];
$("#txtState").autocomplete({
source: stateList
});
});
</script>
</head>
<body>
<div>
<inputtype="text"id="txtState"/>
</div>
</body>
</html>
Output:
Adjust height of option box of autocomplete
Here we are using css for height of autocomplete
<style type="text/css">
.ui-autocomplete {max-height: 200px; overflow-y: auto; overflow-x: hidden;}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall */
* html .ui-autocomplete {height: 200px
;
}
</style>
Output:
Retrieve selected option from autocomplete
Here we are using select event of autocomplete jquery
$("#txtauto").autocomplete({
source: data,
select: function (event, ui) {
alert("You selected - " + ui.item.value );
}
});
Output:
