BuyLog In
Example E3325
Visible to All Users

Text Box for ASP.NET Web Forms - How to apply the jQuery AutoComplete plugin to an editor

This example demonstrates how to apply the jQuery AutoComplete plugin to a text box editor.

AutoComplete plugin

Overview

To apply jQuery selectors to a text box editor, use one of the following approaches:

  • Add a ASPxGlobalEvents component to the page and handle its client-side ControlsInitialized event to initialize the text box editor. To access the editor, use its ClientInstanceName property.
    JavaScript
    function OnControlsInitialized(s, e) {  
    $(txt.GetInputElement()).autocomplete({  
        source: availableTags,  
        position: {  
            my: "left top",  
            at: "left bottom",  
            of: txt.GetMainElement()  
        },  
        select: function (event, ui) {  
            txt.SetValue(ui.item.value);  
        }  
    });  
}
  • Handle the editor's client-side Init event and use the s parameter to get the corresponding the client object.
    JavaScript
    function OnTextBoxInit(s, e) {  
    $(s.GetInputElement()).autocomplete({  
        source: availableTags,  
        position: {  
            my: "left top",  
            at: "left bottom",  
            of: s.GetMainElement()  
        },  
        select: function (event, ui) {  
            s.SetValue(ui.item.value);  
        }  
    });  
}

Files to Review

Documentation

Example Code

ControlEvents.aspx 
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ControlEvents.aspx.cs" Inherits="ControlEvents" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dx" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" type="text/css" href="Styles/AutoCompleteStyles.css" />
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
        function OnTextBoxInit(s, e) {
            //http://jqueryui.com/demos/autocomplete/
            //http://docs.jquery.com/UI/Position
            $(s.GetInputElement()).autocomplete({
                source: availableTags,
                position:
                {
                    my: "left top",
                    at: "left bottom",
                    of: s.GetMainElement()
                },
                select: function (event, ui) {
                  s.SetValue(ui.item.value);
                }
            });
        }
    </script>
</head>
<body>
    <form id="mainForm" runat="server">
    <div>
        <dx:ASPxPageControl ID="pageControl" runat="server" ActiveTabIndex="0" EnableCallBacks="true">
            <TabPages>
                <dx:TabPage Text="Static TabPage">
                    <ContentCollection>
                        <dx:ContentControl runat="server">
                            <b>Click "Dynamic TabPage" to create its content via callback</b>
                        </dx:ContentControl>
                    </ContentCollection>
                </dx:TabPage>
                <dx:TabPage Text="Dynamic TabPage">
                    <ContentCollection>
                        <dx:ContentControl runat="server">
                            <b>Type in, for example, the "a" key to invoke the jQuery AutoComplete plugin</b>
                            <br />
                            <br />
                            <dx:ASPxTextBox ID="textBox" runat="server" Width="170px">
                                <ClientSideEvents Init="OnTextBoxInit" />
                            </dx:ASPxTextBox>
                        </dx:ContentControl>
                    </ContentCollection>
                </dx:TabPage>
            </TabPages>
        </dx:ASPxPageControl>
    </div>
    </form>
</body>
</html>
GlobalEvents.aspx 
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GlobalEvents.aspx.cs" Inherits="GlobalEvents" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" type="text/css" href="Styles/AutoCompleteStyles.css" />
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
        function OnControlsInitialized(s, e) {
            //http://jqueryui.com/demos/autocomplete/
            //http://docs.jquery.com/UI/Position
            $(txt.GetInputElement()).autocomplete({
                source: availableTags,
                position:
                {
                    my: "left top",
                    at: "left bottom",
                    of: txt.GetMainElement()
                },
                select: function (event, ui) {
                  txt.SetValue(ui.item.value);
                }
            });
        }
    </script>

</head>
<body>
    <form id="mainForm" runat="server">
    <div>
        <b>Type in, for example, the "a" key to invoke the jQuery AutoComplete plugin</b>
        <br />
        <br />
        <dx:ASPxTextBox ID="textBox" runat="server" ClientInstanceName="txt" Width="170px">
        </dx:ASPxTextBox>
        <dx:ASPxGlobalEvents ID="globalEvents" runat="server">
            <ClientSideEvents ControlsInitialized="OnControlsInitialized" />
        </dx:ASPxGlobalEvents>
    </div>
    </form>
</body>
</html>
Styles/AutoCompleteStyles.css 
CSS
ul.ui-autocomplete
{
    border: solid 1px #000000;
    list-style-type: none;
    margin: 0px;
    overflow: auto;
    padding: 0px;
    width: 168px;
}
ul.ui-autocomplete a.ui-corner-all
{
    background-color: #EEEEEE;
    display: block;
    font-weight: bold;
}
ul.ui-autocomplete a.ui-state-hover
{
    background-color: #0A246A;
    color: #ffffff;
    cursor: pointer;
    display: block;
}

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.