ListSearchExtender Control in AJAX Using ASP.NET

A K
Feb 10, 2012
51.1k
0
0
Article

Introduction

The ListSearchExtender provides the ability to search items in ListBox and DropDownList control by typing. It performs searching on the basis of typed input. Here are some properties of the ListSearchExtender, of which we will use in our application.

PromptText : It displays the message in the ListBox or DropDownList control. The default text is "Type to search". This text is replaced with typed text by the user.
PromptCssClass : It specifies the name of the CSS class which will be applied to the PromptText.
PromptPosition : It sets the position of PromtText to "Top" or "Bottom" of the control. The default position is "Top".
QueryPattern : It sets the pattern of query for searching in ListBox. There are two values for this. One is "Contains" and another is "StartsWith".
IsSorted : There are two values for this control - "true" or "false". The default value is "false". If it is set to true, it performs a faster search.

Now we take an ASP.NET Web Application and use the ListSearchExtender control. Follow the given steps.

Step 1: At first go to Toolbox and take ScriptManager on form.

Code on .aspx page

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

Step 2 : Take a ListSearchExtender control from the Toolbox.

Code on .aspx page

<asp:ListSearchExtender ID="ListSearchExtender1" runat="server">
        </asp:ListSearchExtender>

Step 3 : Take one Label and and one ListBox and place these into one Panel. Add some items into the ListBox and change the Text of the Label. The code on the .aspx page looks like below.

<asp:Panel ID="Panel1" runat="server">
        <h2 style="color:Red">Choose City</h2>
        <asp:Label ID="lblmessage" Font-Bold="true" Font-Size="15" ForeColor="Green" Text="At first click at ListBox and then type city name." runat="server"></asp:Label><br/><br />
         <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" ForeColor="#669900" Font-Size="15">
            <asp:ListItem>Agra</asp:ListItem>
            <asp:ListItem>Aligarh</asp:ListItem>
            <asp:ListItem>Darbhanga</asp:ListItem>
            <asp:ListItem>Datia</asp:ListItem>
            <asp:ListItem>Dhanbad</asp:ListItem>
            <asp:ListItem>Faridabad</asp:ListItem>
            <asp:ListItem>Faizabad</asp:ListItem>
            <asp:ListItem>Delhi </asp:ListItem>
            <asp:ListItem>Jhansi</asp:ListItem>
            <asp:ListItem>Lucknow</asp:ListItem>
            <asp:ListItem>Varanasi</asp:ListItem>
            <asp:ListItem>Allahabad</asp:ListItem>
        </asp:ListBox>
        </asp:Panel>

The form will look like in the following figure.

Step 4 : Set the TargetControlID property of ListSearchExtender control to "ListBox1" ( ID of ListBox1 ).

<asp:ListSearchExtender ID="ListSearchExtender1" TargetControlID="ListBox1" runat="server">
    </asp:ListSearchExtender>

Step 5 : Run the application.

Now click in the Listbox. The output window will look like in the following figure.

Now type any character of the beginning of a city name. You will note that the first city name whose first character matches the typed character will be selected in the ListBox.

Now we set some properties discussed above. Now I am adding CSS also.

<asp:ListSearchExtender ID="ListSearchExtender1" TargetControlID="ListBox1" PromptText="search city" PromptPosition="Top" QueryPattern="StartsWith" IsSorted="true" PromptCssClass="PromptCSSClass" runat="server">
</asp:ListSearchExtender>

Now run the application and then click at ListBox.

Suppose I am searching for city "Allahabad" which is in ListBox. You will note that it does not select this city.

Because this city is at last in ListBox control and we have set "IsSorted" property to true. So set is to false and search for any city. Run the application.

Now search for any city.