How to searchable dropdownlist

Question

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 });  
            }  
         
      }  

Answer 1

Hi @Dondon510 ,

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):

Then, the output as below:

---

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