How to make search text in ASP.NET dropdown controls

BeUnique 2,232

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)

BeUnique 2,232 Reputation points

2024-05-25T13:39:48.2033333+00:00

kindly pls. update the above queries when anyone is available.

Accepted answer

Lan Huang-MSFT 29,991 Microsoft Vendor

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.

BeUnique 2,232 Reputation points

2024-05-27T10:24:44.6933333+00:00

Hi @Lan Huang ,

Thanks for your reply.

if i use bootstrap css for search dropdown, why couldn't we search the specific letter in the above mentioned sample code..?

your jQuery code is working. But, when postback the dropdown, it will automatically clear the previous status (like search dropdown not working and it is revert to normal dropdown...)

what we need to change for this...?

Lan Huang-MSFT 29,991 Microsoft Vendor

Hi @Gani_tpt,

if i use bootstrap css for search dropdown, why couldn't we search the specific letter in the above mentioned sample code..?

Remove data-live-search-style="begins", this should mean search from first letter.

your jQuery code is working. But, when postback the dropdown, it will automatically clear the previous status (like search dropdown not working and it is revert to normal dropdown...)

How did you implement postback for the dropdown? I haven't reproduced your problem, can you provide the problematic code?

if you are populating the dropdown list during page load then each time the page postback it will reload the list thus negating your postback method. you need to be sure to load the dropdownlist only if (!Page.IsPostBack){ BindStateList();}.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
</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" OnSelectedIndexChanged="cbCustomer_SelectedIndexChanged"
                            class="selectpicker" data-live-search="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

BeUnique 2,232 Reputation points

2024-05-28T06:22:26.6766667+00:00

Hi @Lan Huang-MSFT ,

Thanks for your reply.your code is working fine.

Is it possible to change the style of the dropdown text values and its font size and font family.

Also, i want to change the height and width of the dropdown by manually.

By default, now it is taking from the bootstrap css..

How to change the font,border color, height and width for dropdown and its text values...?

Lan Huang-MSFT 29,991 Microsoft Vendor

Hi @Gani_tpt,

bootstrap-select has fewer built-in CSS attributes, and the width can be set through data-width. For the CSS of the <option> component, you can add class name options in ListItem to uniformly set the CSS.

Below is my test code, you can change it according to your own needs.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
    <style>
        .option{
          font-family:Arial;
          font-size:20px;
          border:solid;
          border-color:green;                     
        }
        .btn{
           font-size:20px;
           font-family:Candara
        }
        
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <br />
            <br />
            <table>
                <tr>
                    <td>Country:-
                    </td>
                    <td>
                        <asp:DropDownList ID="cbCustomer" runat="server"  AutoPostBack="true" OnSelectedIndexChanged="cbCustomer_SelectedIndexChanged"
                            class="selectpicker" data-live-search="true" data-width="300px" data-style="btn-success" >
                            <asp:ListItem class="option" Selected="True" Text="--Select--" Value="--Select--"></asp:ListItem>
                            <asp:ListItem class="option" Text="Portugal-BL-CZ231" Value="Portugal-BL-CZ231"></asp:ListItem>
                            <asp:ListItem class="option" Text="GERMANY-AM-CX2918" Value="GERMANY-AM-CX2918"></asp:ListItem>
                            <asp:ListItem class="option" Text="USA-291-BC232X" Value="USA-291-BC232X"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

User's image

BeUnique 2,232 Reputation points

2024-05-28T08:23:25.1433333+00:00

Hi @Lan Huang-MSFT ,

Many thanks for your reply.

i am binding data in code behind page.

how to use ".option" style if binding data in code behind...?

Lan Huang-MSFT 29,991 Microsoft Vendor

Hi @Gani_tpt,

You could do this in the code-behind.

 for (int row = 0; row <= dt.Rows.Count - 1; row++)
 {
     cbCustomer.Items[row].Attributes.Add("class", "option");
 }

All code

 if (!Page.IsPostBack)
 {
     SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConString"].ConnectionString);
     SqlCommand cmd = new SqlCommand("Select * from Customers", con);
     SqlDataAdapter da = new SqlDataAdapter(cmd);
     DataTable dt = new DataTable();
     da.Fill(dt);
     cbCustomer.DataTextField = "City";
     cbCustomer.DataValueField = "CustomerID";
    
     cbCustomer.DataSource = dt;
     cbCustomer.DataBind();
   
     for (int row = 0; row <= dt.Rows.Count - 1; row++)
     {
         cbCustomer.Items[row].Attributes.Add("class", "option");
     }
 }

BeUnique 2,232 Reputation points

2024-05-28T09:46:49.24+00:00

Hi @Lan Huang-MSFT ,

what option to use for dropdown height...?
Lan Huang-MSFT 29,991 Reputation points Microsoft Vendor

2024-05-28T10:00:14.3133333+00:00

Hi @Gani_tpt,
BeUnique 2,232 Reputation points

2024-05-28T12:59:40.43+00:00

Hi @Lan Huang-MSFT ,

Thanks for your reply.

Last question for this post.

In the dropdown, when i enter some data and "no result found" showing background color is very very light color.

i want to change that color also. but, i have no idea what attributes needs to be used.

below image for your reference.

1 additional answer

Bruce (SqlWork.com) 68,306

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

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

BeUnique 2,232 Reputation points

2024-05-25T16:36:46.8333333+00:00

Hi @Bruce (SqlWork.com) ,

Thanks for your reply..

How do i implement in ASP.NET dropdown controls using he bootstrap css file..?

can i have example....?
Bruce (SqlWork.com) 68,306 Reputation points

2024-05-25T19:48:54.3733333+00:00

To do what you want is a mix of html, css and JavaScript. See bootstrap docs for dropdowns

https://getbootstrap.com/docs/5.1/components/dropdowns/
BeUnique 2,232 Reputation points

2024-05-26T02:57:56.64+00:00

Can anyone please update the above queries...?
BeUnique 2,232 Reputation points

2024-05-26T07:35:57.9333333+00:00

Kindly reply if possible to update the above queries...

BeUnique 2,232

Hi All,

I am trying some code as below. it is searching well (partial text). but, it is not searching the complete text.

The main problem is, the dropdown has disappear while dropdown selected index changed==> main problem

and the second problem is below,

When i type BL in the text box, it should show two BI values from "Portugal-BL-CZ231" values.

But, it will search only "Portugal" and not searching BL and CZ231.

i want to search all the word from the text.

How to do this...?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
</head>
<body>
    <div>
        <br />
        <br />
        <table>
            <tr>
                <td>
                    Country:-
                </td>
                <td>
                      <asp:DropDownList ID="cbCustomer" runat="server" Width="300px" AutoPostBack="true" OnSelectedIndexChanged="cbCustomer_SelectedIndexChanged"
                                                    class="selectpicker" data-live-search-style="begins" data-live-search="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>
</body>
</html>

Share via

How to make search text in ASP.NET dropdown controls

1 additional answer

Your answer