New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Add/Remove Tokens

    • Demo Configurator
    • Available actions
    RadAutoCompleteBox provides a rich client API for working with the control on the client.
    This application scenario demonstrates various operations with RadAutoCompleteBox entries, performed entirely on the client. It also shows what happens to the control after a postback to the server.

    The operations performed on the Entries collection of RadAutoCompleteBox include:

    • Add an entry to the Entries collection.
    • Delete an entry from the Entries collection.
    • Delete the whole Entries collection.
    • Get the currently present text in the input area.
    • DefaultCS.aspx
    <%@ Page Language="c#" AutoEventWireup="true"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
    </head>
     
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container size-narrow">
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="RadAutoCompleteBox1" runat="server"  Width="500"
                DropDownHeight="250" DataSourceID="SqlDataSource1" DataTextField="CompanyName" EmptyMessage="Select Company Name"
                AllowCustomEntry="True">
            </telerik:RadAutoCompleteBox>
        </div>
     
        <telerik:RadCodeBlock ID="CodeBlock1" runat="server">
            <script type="text/javascript">
                //<![CDATA[
                function AddNewEntry() {
                    var autoCompleteBox = $find("<%= RadAutoCompleteBox1.ClientID %>");
                    var inputElement = document.getElementById("<% =TextBox1.ClientID %>");
                    var inputText = inputElement.value;
                    if (!inputText) return;
                    var entry = new Telerik.Web.UI.AutoCompleteBoxEntry();
                    entry.set_text(inputText);
                    autoCompleteBox.get_entries().add(entry);
                    inputElement.value = "";
                }
     
                function RemoveEntry() {
                    var autoCompleteBox = $find("<%= RadAutoCompleteBox1.ClientID %>");
                    var firstEntry = autoCompleteBox.get_entries().getEntry(0);
                    if (firstEntry) {
                        autoCompleteBox.get_entries().remove(firstEntry);
                    }
                }
     
                function ClearAllEntries() {
                    var autoCompleteBox = $find("<%= RadAutoCompleteBox1.ClientID %>");
                    autoCompleteBox.get_entries().clear();
                }
     
                //]]>
            </script>
        </telerik:RadCodeBlock>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [CustomerPhotos]"></asp:SqlDataSource>
     
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
     
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
            <Views>
                <qsf:View Title="Available actions">
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <qsf:TextBox runat="server" ID="TextBox1" Size="Medium" />
                                <qsf:Button ID="btn" runat="server" Text="Add New Entry" OnClientClicked="AddNewEntry" Size="Medium"></qsf:Button>
                            </li>
                            <li>
                                <qsf:Button ID="btnClearAllEntries" runat="server" Width="135" Text="Clear All Entries" OnClientClicked="ClearAllEntries"></qsf:Button>
                                <qsf:Button ID="btnDeleteFirstEntry" runat="server" Width="145" Text="Delete First Entry" OnClientClicked="RemoveEntry"></qsf:Button>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance