question

Dondon510-9757 avatar image
0 Votes"
Dondon510-9757 asked ZhiLv-MSFT answered

How to searchable dropdownlist

I have a dropdownlist to show the list of timezones, it shows correctly but how to add search function?

cshtml

  <div class="row">
         <div class="col-6 mb-2">
                  <label class="form-label" for="">Timezone</label>
                   <div class="input-group input-group-merge">
                           @Html.DropDownListFor(x => x.timeZone, Model.timeZones, new { @id="timeZones", @class= "form-select" }); 
                    </div>
                    <span asp-validation-for="timeZones" class="text-danger"></span>
       </div>
 </div>

class:

public SelectList timeZones { get; set; } = new SelectList(Helper.Get_TimeZones(), "Value", "Text");
public string timeZone { get; set; } = "";

Helper

  public static List<SelectListItem> Get_TimeZone() {

         List<SelectListItem> list = new List<SelectListItem>();

            
             ReadOnlyCollection<TimeZoneInfo> timeZones = TimeZoneInfo.GetSystemTimeZones();
             list.Add(new SelectListItem() { Value = "", Text = "" });

             foreach (TimeZoneInfo timeZone in timeZones)
             {
                 list.Add(new SelectListItem() { Value = timeZone.Id, Text = timeZone.DisplayName });
             }
           
       }






dotnet-aspnet-core-mvc
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered

Hi @Dondon510-9757,

You can try to use the Select2 jQuery Plugin for implementing Searchable DropDownList.

Based on your code and add the following scripts (View the source code: 227131-sourcecode.txt):

227103-image.png

Then, the output as below:

227117-1.gif


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.

Best regards,
Dillion


sourcecode.txt (2.0 KiB)
image.png (135.9 KiB)
1.gif (83.0 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.