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

    WebForms SearchBox Overview

    Find information about the achievements of the Olympic champions.

    The following demo shows how RadSearchBox can effectively search in large Datasets. The usage of DataKeyNames collection demonstrates how additional information could be stored for each result and then reused on the server once a result is selected. Search operation could be performed per "sport" basis by selecting a specific sport from the search context.

    About RadSearchBox for ASP.NET AJAX

    Telerik RadSearchBox for ASP.NET AJAX provides the user the ability to write text in an input field with an optional autocomplete functionality. The control has a default “search” button, which triggers an event containing the search value. The user can use this event to manually show data filtered by this value, in a manner he chooses (RadGrid, RadListView etc.). The control also has a collection of image buttons, which the user can use to implement additional custom logic.

    RadSearchBox can be bound to various data sources. It is populated with data by either server-side binding (ASP.NET Data Source controls), or client-side binding (Web service, WCF service, ODATA).

    RadSearchBox and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

    Key Features

    • DropDownHeader/Footer Templates
    • Client/Server Templates
    • Search Context
    • Keyboard Navigation
    • Filter (StartsWith/Contains)
    • MinFilterLength
    • MaxResultsCount
    • Passing Custom Context Information

    More about RadSearchBox for ASP.NET AJAX
    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="SearchBox_Examples_Overview_DefaultCS"  %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
     
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     
        <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server">
            <div class="demo-container no-bg">
     
                <span class="info">Find information about the achievements of the Olympic champions.</span>
     
                <telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
                    CssClass="searchBox" Skin="Silk"
                    Width="460" DropDownSettings-Height="300"
                    DataSourceID="SqlDataSource1"
                    DataTextField="fullName"
                    DataValueField="id"
                    DataKeyNames="sport,birthday,country"
                    EmptyMessage="Search"
                    Filter="StartsWith"
                    MaxResultCount="20"
                    OnDataSourceSelect="RadSearchBox1_DataSourceSelect"
                    OnSearch="RadSearchBox1_Search">
                    <SearchContext DataSourceID="SqlDataSource2" DataTextField="name" DataKeyField="id" DropDownCssClass="contextDropDown"></SearchContext>
                </telerik:RadSearchBox>
     
                <asp:Label runat="server" ID="FullName" CssClass="fullName"></asp:Label>
                <asp:Label runat="server" ID="LabelCountry" CssClass="country"></asp:Label>
                <asp:Label runat="server" ID="LabelBirthday" CssClass="birthday"></asp:Label>
                <asp:Label runat="server" ID="LabelSport" CssClass="sport"></asp:Label>
                <asp:Label runat="server" ID="Gold" CssClass="gold"></asp:Label>
                <asp:Label runat="server" ID="Silver" CssClass="silver"></asp:Label>
                <asp:Label runat="server" ID="Bronze" CssClass="bronze"></asp:Label>
     
            </div>
        </telerik:RadAjaxPanel>
     
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:OlympicsConnectionString %>"
            SelectCommand="SELECT * FROM [athletes]"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server"
            ConnectionString="<%$ ConnectionStrings:OlympicsConnectionString %>"
            SelectCommand="SELECT [id], [name] FROM [sports] WHERE ([category] IS NULL) ORDER BY [name]"></asp:SqlDataSource>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance