Monday, July 16, 2012

Asp.Net jQuery UI Autocomplete Position


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

The Position property determines the display position of the Autocomplete options, by default the Autocomplete control is aligned with the bottom left position of the textbox controls, the position can be altered using the below script.


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 position moves to the top right of the textbox

<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 Position
            // my - refers to - AutoComplete Control
            // at - refers to - Text Box Control
            // offset - refers to - (x,y) gap between the 2 Controls
            // Left Top of Autocomplete positioned with Right Top of TextBox,
               with Offset 1px.
            $("#txtAutocompletePosition").autocomplete
            ({
                source: arrCountries,
                position:
                {
                    my: "left top",
                    at: "right top",
                    offset: "1 0"
                }
            });
});
</script>
</head>
<body>
    <form id=" frmAutocompleterunat="server">
        <table>
            <tr>
                <td>Autocomplete Positioning: </td>
                <td>
                    <asp:TextBox
                        ID="txtAutocompletePosition"
                        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

No comments: