Monday, July 16, 2012

Asp.Net jQuery UI Autocomplete minLength


In this post Asp.Net jQuery UI Autocomplete minLength we shall see on how to use the minLength property to control the behavior of the Autocomplete control.

The minLength property determines the number of characters to be entered by the user, before displaying the Autocomplete options, the default value of minLength is 1, we can alter this as per our needs.



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. Notice that the Autocomplete options get displayed only when you enter a min of 2 characters in the testbox.

<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 minLength
            $("#txtAutocompleteLength").autocomplete
            ({
                source: arrCountries,
                minLength: 2
            });
});
</script>
</head>
<body>
    <form id=" frmAutocompleterunat="server">
        <table>
            <tr>
                <td>Autocomplete Minimum Length (2): </td>
                <td>
                    <asp:TextBox
                        ID="txtAutocompleteLength"
                        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

Search Flipkart Products:
Flipkart.com

No comments: