ListSearch Sample

ListSearchExtender Demonstration

Click on this ListBox and start typing to search for an entry:

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.

ListSearchExtender 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.

ListSearchExtender Properties

The controls above are initialized with code like this. The italic properties 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 <HideAction Visible="true" /> 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.

ListSearchExtender Known Issues

In Safari the ListSearchExtender only works with ListBoxes, not DropDownLists.

In Opera the backspace key moves back a page in the browser history by default when it is pressed on a ListBox or DropDownList. To change this behavior you can go to Tools|Preferences|Shortcuts, edit the Keyboard setup, search for “back” and change the mapping for “Platform Windows-Unix-MCE, Backspace” to “Backspace” instead of “Backspace | Back”