Monday, July 16, 2012

Asp.Net jQuery UI Autocomplete Event Handler


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>
</head>
<body>
    <form id=" frmAutocompleterunat="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

Search Flipkart Products:
Flipkart.com

1 comment:

Final Fantasy XIV Gil said...

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