How to make search text in ASP.NET dropdown controls

Gani_tpt 2,106 Reputation points
2024-05-25T08:11:36.1666667+00:00

I have been developing ASP.NET application. some of the place i want searchable dropdown controls. the dropdown should search both numbers and name.

How to do this...?

example data as below.

Cust.Name | Cust.Number

Alfred K AXN29109 ==> Alfred K - AXN29109

Raphael J ALM49281 ==> Raphael J - ALM49281

Joseph N KXE349393 ==> Joseph N - KXE349393

Alfred M KXA233983 ==> Alfred M - KXA233983

My binding dropdown values will be as below.

Alfred K - AXN29109

Raphael J - ALM49281

Joseph N - KXE349393

Alfred M - KXA233983

When i type in dropdown like Alfred, it should show 2 list.

or if i search "KX" it should show, two count (Joseph N - KXE349393 and Alfred M - KXA233983)

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,386 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,536 questions
{count} votes

Accepted answer
  1. Lan Huang-MSFT 28,126 Reputation points Microsoft Vendor
    2024-05-27T05:51:38.63+00:00

    Hi @Gani_tpt,

    You can try using jQuery Select2 plugin.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=cbCustomer]").select2();
        });
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <br />
                <br />
                <table>
                    <tr>
                        <td>Country:-
                        </td>
                        <td>
                            <asp:DropDownList ID="cbCustomer" runat="server" Width="300px" AutoPostBack="true">
                                <asp:ListItem Selected="True" Text="--Select--" Value="--Select--"></asp:ListItem>
                                <asp:ListItem Text="Portugal-BL-CZ231" Value="Portugal-BL-CZ231"></asp:ListItem>
                                <asp:ListItem Text="GERMANY-AM-CX2918" Value="GERMANY-AM-CX2918"></asp:ListItem>
                                <asp:ListItem Text="USA-291-BC232X" Value="USA-291-BC232X"></asp:ListItem>
                            </asp:DropDownList>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    User's image

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 59,546 Reputation points
    2024-05-25T16:17:14.7833333+00:00

    Google JavaScript autocomplete to get list of possible solutions. Here is an article on some:

    https://www.jqueryscript.net/blog/best-autocomplete-typeahead.html