Home / AJAX

HOW TO Use the ListSearch Control

RSS
Modified on 2010/01/19 00:07 by Erik Reitan Categorized as Uncategorized

ListSearch Demonstration





ListSearch Description

The ListSearchExtender lets you search for items in a ListBox or DropDownList by typing. The extender performs an incremental search within the ListBox based on what has been typed so far. The prompt message that gets displayed when you click the list can be customized along with its CSS class and position.

Video - How Do I: Use the ASP.NET AJAX ListSearch Control?

ListSearch Client Code Sample

<!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>Untitled Page</title> <style type="text/css"> #prompt { background-color: Yellow; } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; Sys.require(Sys.components.listSearch, function() { $("#dd").listSearch({}); $("#list").listSearch({ promptText: "my prompt", promptCssClass: "prompt", promptPosition: Sys.Extended.UI.ListSearchPromptPosition.Bottom, queryPattern: Sys.Extended.UI.ListSearchQueryPattern.Contains }); }); </script> </head> <body> <select id="dd"> <option value="Alfa">Alfa</option> <option value="Alpha">Alpha</option> <option value="Bissotwo">Bissotwo</option> <option value="Bravo">Bravo</option> <option value="Charlie">Charlie</option> <option value="Delta">Delta</option> </select>

<select id="list" multiple="multiple"> <option value="Alfa">Alfa</option> <option value="Alpha">Alpha</option> <option value="Bissotwo">Bissotwo</option> <option value="Bravo">Bravo</option> <option value="Charlie">Charlie</option> <option value="Delta">Delta</option> </select> </body> </html>

ListSearch Client Reference

Sys.Extended.UI.ListSearchBehavior Class

  • Summary - The ListSearchBehavior is used to incrementally search for items in a ListBox or DropDownList.
  • Parameters - Sys.UI.DomElement element

Methods

  • initialize() - Initializes the ListSearch control's behavior.
  • dipose() - Disposes the ListSearch control's behavior.
  • onShow() - Play the OnShow animation.
  • onHide() - Play the OnHide animation.

Properties

  • onShow - Gets or sets a generic OnShow animation's JSON definition.
  • onShowBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object containing the generic OnShow animation's behavior.
  • onHide - Gets or sets a generic OnHide animation's JSON definition.
  • onHideBehavior - Gets a Sys.Extended.UI.Animation.GenericAnimationBehavior object containing the generic OnHide animation's behavior.
  • promptText - Gets or sets the prompt text displayed when user clicks the list.
  • promptCssClass - Gets or sets a CSS class applied to prompt when user clicks the list.
  • promptPosition - Gets or sets a Sys.Extended.UI.ListSearchPromptPosition value used to determine where the prompt should be positioned relative to the target control.
  • raiseImmediateOnChange - Gets or sets a Boolean value indicating whether an OnChange event should be fired as soon as the selected element is changed, when the list loses focus or when the user hits enter.
  • queryTimeout - Gets or sets a number indicating a timeout in milliseconds upon which the search query will be cleared. Zero means no auto reset at all.
  • isSorted - Gets or sets a boolean value used to determine whether the list has been sorted upon population.
    • Remarks - true indicates that all values in List are already sorted upon population.
  • queryPattern - Gets or sets a Sys.Extended.UI.ListSearchQueryPattern value used to determine the search query pattern to be used to find items.

Sys.Extended.UI.ListSearchPromptPosition Enum

  • Summary - The relative location Where the ListSearch prompt will be positioned.

Fields

  • Top - A field that specifies the relative ListSearch prompt position.
  • Bottom - A field that specifies the relative ListSearch prompt position.

Sys.Extended.UI.ListSearchQueryPattern Enum

  • Summary - Used to specify the query pattern to use to search for matching words.

Fields

  • StartsWith - A field that specifies the query pattern.
  • Contains - A field that specifies the query pattern.

ListSearch Server Code Sample

<script runat="server">
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        ListBox1.DataSource = GetWordListText();
        ListBox1.DataBind();
        DropDownList1.DataSource = GetWordListText();
        DropDownList1.DataBind();
    }
</script>
        <p>
            Click on this ListBox and start typing to search for an entry:
        </p>
            <br />
        <p>
            <asp:ListBox ID="ListBox1" runat="server" Width="100px" />
            <ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" runat="server"
                TargetControlID="ListBox1" PromptCssClass="ListSearchExtenderPrompt" 
                IsSorted="true">
            </ajaxToolkit:ListSearchExtender>
        </p>
        <p>
            It works for a DropDownList too. In this case, instead of searching for a string that
            starts with the word we get words that contain the typed word. It resets the search 
            query after 2 seconds if no match is found.
        </p>
            <br />
        <p>
            <asp:DropDownList ID="DropDownList1" runat="server" Width="100px" />
            <ajaxToolkit:ListSearchExtender ID="ListSearchExtender2" runat="server"
                TargetControlID="DropDownList1" PromptCssClass="ListSearchExtenderPrompt"
                QueryPattern="Contains" QueryTimeout="2000">
            </ajaxToolkit:ListSearchExtender>
        </p>

ListSearch Server Reference

The properties in italics are optional.

<ajaxToolkit:ListSearchExtender id="LSE" runat="server"
    TargetControlID="ListBox1"
    PromptText="Type to search"
    PromptCssClass="ListSearchExtenderPrompt"
    PromptPosition="Top"
    AutoResetTimeout="0"
    IsSorted="true"/>
  • PromptText - Message to display when the ListBox or DropDownList is given focus. Default is 'Type to search'. The PromptText is replaced by the search text typed by the user.
  • PromptCssClass - The name of the CSS class to apply to the prompt message.
  • PromptPosition - Indicates whether the message should appear at the Top or Bottom of the ListBox. The default is Top.
  • QueryPattern - Indicates how the typed characters should be used in the search query. The default pattern queries for results that start with the typed word.
  • IsSorted - Indicates if items added to the List are expected to be sorted. The default is false. If set to true it allows the code to perform a faster search instead of having to determine the same before performing the search.
  • QueryTimeout - Indicates whether the search query should be reset after the timeout if no match is found. The default is 0, meaning no auto reset behavior.
  • Animations - Generic animations for the ListSearch extender. See the Using Animations walkthrough and Animation Reference for more details.
    • OnShow - The OnShow animation will be played each time the extender's prompt is displayed. The prompt will be positioned correctly but hidden. The animation can use to display the prompt along with any other visual effects.
    • OnHide - The OnHide animation will be played each time the extender's prompt is hidden.



ListSearch Additional Code Samples