Searching a ListBox or DropDownList using the ListSearchExtender Control using ASP.NET AJAX

Posted by: Suprotim Agarwal , on 2/16/2008, in Category ASP.NET AJAX
Views: 80894
Abstract: The ListSearchExtender control is a control that ships with the Microsoft AJAX Control Toolkit. ListSearchExtender enables the DropDownList and ListBox to be searchable. The user can navigate to and select an item in the list by simply typing the first few characters. This could be especially useful if there is a long list to be searched.
Searching a ListBox or DropDownList using the ListSearchExtender Control using ASP.NET AJAX
 
The ListSearchExtender control is a control that ships with the Microsoft AJAX Control Toolkit.  ListSearchExtender enables the DropDownList and ListBox to be searchable. The user can navigate to and select an item in the list by simply typing the first few characters. This could be especially useful if there is a long list to be searched.
Let us quickly see how to use the ListSearchExtender control in our projects.
Step 1: Add a ListBox and DropDownList to the webform.
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            Click on the
            ListBox and type the word to search<br />
            <br />
            <br />
            <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
            <br />           
            <br />
            &nbsp;<br />
            Click on the
            DropDownList and type the word to search<br />
            <br />
            <br />
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>           
            <br />
        </div>
    </form>
</body>
Step 2: Populate the ListBox and DropDownList with a few items. Over here, we are using the ‘for’ loop to add items to the ListBox and DropDownList. If you want, you can implement a real world scenario where you can connect to a database and bind the controls to a collection.
C#
protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 100; i++)
        {
            ListBox1.Items.Add("Items " + i.ToString());
            DropDownList1.Items.Add("Items " + i.ToString());
        }
    }
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            For i As Integer = 0 To 99
                  ListBox1.Items.Add("Items " & i.ToString())
                  DropDownList1.Items.Add("Items " & i.ToString())
            Next i
End Sub
Step 3: Drag and drop two ’ ListSearchExtender’  controls to the form. If you have the AJAX Control Toolkit, you will find the ListSearchExtender control in the ‘Ajax Toolkit’ tab of the toolbox. Set the ‘TargetControlID’ of ListSearchExtender1 as ‘ListBox1’ and ‘TargetControlID’ of ListSearchExtender2 as ‘DropDownList1’ as shown below:
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            Click on the
            ListBox and type the word to search<br />
            <br />
            <br />
            <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
            <br />
            <cc1:ListSearchExtender ID="ListSearchExtender1" runat="server" TargetControlID="ListBox1">
            </cc1:ListSearchExtender>
            <br />
            &nbsp;<br />
            Click on the
            DropDownList and type the word to search<br />
            <br />
            <br />
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
            <cc1:ListSearchExtender ID="ListSearchExtender2" runat="server" TargetControlID="DropDownList1">
            </cc1:ListSearchExtender>
            <br />
        </div>
    </form>
</body>
Run the application and click on the ListBox control. Search for an item (Eg: “Items 45”). You will observe that the ListSearchExtender searches the item and highlights it for us. Similarly try it out for the dropdownlist control too.
Simple ain’t it!! We will explore some other important controls in the articles to come. I would encourage you to do the same. If you have an article to share for dotnetcurry, submit it over here. I hope you found this article useful and I thank you for viewing it.
If you liked the article, please subscribe to my RSS feed over here.
 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by amal on Friday, March 7, 2008 3:34 AM
It is useful article
Comment posted by balaji on Monday, March 10, 2008 2:10 AM
Hi,
       How to invisible parent form when i am clicking Popup button.
Comment posted by Rajendra on Friday, April 18, 2008 3:54 AM
how to implement <cc1:ListSearchExtender ID="ListSearchExtender1" runat="server" TargetControlID="ListBox1">
            </cc1:ListSearchExtender>
this is not working on my .net asp.net 2.0 and ajax toolkit version 1.1
Comment posted by akarthimca on Friday, June 27, 2008 1:05 AM
using the ajaxpro.dll how to develop the website in C#(ASP.net).
Comment posted by Sudhakar. N on Wednesday, April 15, 2009 1:03 AM
This is not working for me.The drop down behaves as it is and the no functionality of ListSearchExtender is observed. Please let me know if i am anything wrong.Following is my code:
<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <%--<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>--%>
                    <asp:DropDownList ID="NameDropDownList" runat="server" SkinID="DropDownListOperator">
                    </asp:DropDownList>
                    <cc1:ListSearchExtender ID="ListSearchExtender1" runat="server" TargetControlID="NameDropDownList">
                    </cc1:ListSearchExtender>
</div>
    </form>
Comment posted by Suprotim Agarwal on Friday, April 17, 2009 5:56 AM
Sudhakar: Which version of ASP.NET and AJAX are you using?
Comment posted by Alok Tripathi on Friday, December 11, 2009 5:55 AM
Hi thanks for ur valuable code. going further with this code, i want to call server side code, when i hit enter(return key)key. u may say, it will search frm database as per item selected in this list box. will u give any idea or working hands?
thanks in advance.. :)
Comment posted by Emmanuel Natalis on Wednesday, March 17, 2010 11:55 AM
This is my first time

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

Tags

JQUERY COOKBOOK

jQuery CookBook