ListSearchExtender enables the DropDownList and ListBox to be searchable. The extender performs an incremental search within the ListBox based on what has been typed so far.
Let us see how to use the ListSearchExtender control in our projects.
Step 1: Add a ScriptManager to the page.
Step 2: Add a DropDownList to the webform.
Step 3: Bind the DropDownList with a datasource or add few items.
Step 4: Drag and drop a ListSearchExtender control to the form.
Step 5: Set the TargetControlID of ListSearchExtender as DropDownList
Step 6: Run the application and click on the DropDownList control. Search for an item (Eg: “One”). You will observe that the ListSearchExtender searches the item and highlights it for us.
ListSearchExtender.aspx
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2:
3: <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
4:
5: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6:
7: <html xmlns="http://www.w3.org/1999/xhtml">
8: <head runat="server">
9: <title>ListSearchExtender</title>
10: <style type="text/css">
11: .ListSearchExtenderPrompt
12: {
13: color:gray;
14: font-size:large;
15: font-style:italic;
16: font-weight:bold;
17: background-color:white;
18: height:25px;
19: }
20: </style>
21: </head>
22: <body>
23: <form id="form1" runat="server">
24: <asp:ScriptManager ID="ScriptManager1" runat="server" />
25: <div>
26: <br />
27: <br />
28: <br />
29: <asp:DropDownList ID="DropDownList1" runat="server" Height="20px" Width="105px">
30: </asp:DropDownList>
31:
32: <cc1:ListSearchExtender ID="DropDownList1_ListSearchExtender" runat="server"
33: Enabled="True" IsSorted="true" QueryPattern="Contains" TargetControlID="DropDownList1" PromptText="Type to Search"
34: PromptPosition="Top" PromptCssClass="ListSearchExtenderPrompt">
35: </cc1:ListSearchExtender>
36: </div>
37: </form>
38: </body>
39: </html>
ListSearchExtender.cs
1: using System;
2: using System.Configuration;
3: using System.Data;
4: using System.Linq;
5: using System.Web;
6: using System.Web.Security;
7: using System.Web.UI;
8: using System.Web.UI.HtmlControls;
9: using System.Web.UI.WebControls;
10: using System.Web.UI.WebControls.WebParts;
11: using System.Xml.Linq;
12:
13: public partial class _Default : System.Web.UI.Page
14: {
15: protected void Page_Load(object sender, EventArgs e)
16: {
17: DropDownList1.Items.Add("One");
18: DropDownList1.Items.Add("Two");
19: DropDownList1.Items.Add("Three");
20: DropDownList1.Items.Add("Four");
21: DropDownList1.Items.Add("Five");
22: }
23: }
Thank you.. It is very useful to my application.
Posted by jani | May 9, 2011, 2:49 pmi followed the example but cannot get it to search beyond the first alphabet. what am i doing wrong
Posted by mona | September 27, 2011, 6:54 pmPlease, make sure that ajaxcontroltoolkit.dll is present into bin folder of your project.
Posted by Anupam | November 17, 2011, 4:06 pm