In this post Asp.Net jQuery
UI Autocomplete Event Handler we
shall see on how to handle the events associated with Autocomplete using jQuery.
The
jQuery Autocomplete control supports various events like create, open, select, search,
chage etc. Here we shall see on how to
handle these events.
In this post we shall see on how to handle the select event. Create an .aspx page, add a TextBox to the page and add the below jQuery script. Change the references of the jQuery library files to map to your local path. Build and run the application. Enter A in the textbox, when the Autocomplete pops up, click on one of the options, notice that the select event fires and a message box appears. All other events can be handled similarly by adding appropriate handlers.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Autocomplete </title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
var
arrCountries = [
"Albania",
"Algeria",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Argentina",
"Armenia",
"Aruba",
"Australia",
"Azerbaijan"
];
//
$(document).ready(function() {
//
//
AutoComplete Select Event
$("#txtAutocompleteSelect").autocomplete
({
source:
arrCountries,
select:
function(event, ui) {
alert('Selected Value: ' +
ui.item.label);
alert('Textbox Value: ' + this.value);
}
});
});
</script>
</script>
</head>
<body>
<form id=" frmAutocomplete" runat="server">
<table>
<tr>
<td>Autocomplete Select event: </td>
<td>
<asp:TextBox
ID="txtAutocompleteSelect"
runat="server"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html>For a full example covering all possible scenarios in using a jQuery UI Autocomplete control refer to the post Asp.net jQuery UI Autocomplete Tutorial
Related Posts
1 comment:
Like the simple life, very clean and very quiet , Thanks for sharing.I like your photos.Look forward to you have more Posts
Buy Final Fantasy XIV Gil
FF14 CD Key
Post a Comment