ListSearchExtender Demonstration
Click on this ListBox and start typing to search for an entry:
It works for a DropDownList too:
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.
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" />
- 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.
- 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.
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”