jQuery Dropdown - варианты сбрасывания программно

Question

У меня есть тег select с несколькими параметрами. У меня есть поле поиска для фильтрации, которое скрывает или показывает параметры в зависимости от того, какой текст вы вводите. Я хочу отключить опции так же, как это работает, когда я нажимаю на нее, но я хочу сделать это программно. Надеюсь, кто-то поймет, что я пытаюсь сказать.

с другими словами, в то время как пользователь вводит что-то в поиске текстовое поле, я хочу, чтобы мой выпадающий элемент падать вниз, пользователь сможет увидеть результаты поиска при вводе ...

Я нашел некоторые примеры с <ul> и <li>, но я хочу с <select> и <option>.

HTML

<select id="select_street"> 
    <option value="1">Street 1</option> 
    <option value="2">Street 2</option> 
    <option value="3">Street 3</option> 
    <option value="4">Street 4</option> 
</select> 
<input type="text" id="search_filter" /> 

Javascript/JQuery

$("#search_filter").on('keyup', function (e) { 
     $("#select_street option").each(function() { 
      if ($(this).html().toLowerCase().includes($.trim($('#search_filter').val()).toLowerCase())) { 
       $(this).show(); 
      } else { 
       $(this).hide(); 
      } 
     }); 
    }); 

Спасибо!

Answer 1

Согласно этому answer это будет ближайший вы можете получить к решению:

$("#search_filter").on('keyup', function(e) { 
    $("#select_street").attr('size', $("#select_street option").length); 
    //... 
}); 

---

Example

Answer 2

Ваш код делает то, что вы хотите, но вы должны начать со всеми опциями скрыть вот так:

$("#search_filter").on('keyup', function (e) { 
    $("#select_street option").each(function() { 
     if ($('#search_filter').val() == '') { 
      $('#select_street option').hide(); 
      $('#select_street').val(''); 
      return; 
     } 
     if ($(this).html().toLowerCase().includes($.trim($('#search_filter').val()).toLowerCase())) { 
      $(this).show(); 
      if ($('#select_street').val() == '') { 
       $('#select_street').val($('#select_street option:first').val()); 
      } 
     } else { 
      $(this).hide(); 
      if ($(this).is(':selected')) { 
       $('#select_street').val(''); 
      } 
     } 
    }); 
}); 
$('#select_street option').hide(); 
$('#select_street').val(''); 

Причина, по которой никто не использует s потому что вы не можете его программно открыть. Мой совет: вы выбираете один из этих https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/, не пытайтесь изобретать велосипед.