jQueryドロップダウン - プログラムでオプションをドロップダウン

Question

私は複数のオプションを持つ選択タグを持っています。フィルタリングのための検索ボックスがあり、入力するテキストに応じてオプションを表示または非表示にします。私はそれをクリックしたときと同じようにオプションをドロップダウンしたいが、私はそれをプログラム的にやりたい。誰かが私が言うことを理解してくれることを願っています。言い換えると

、ユーザーが検索テキストボックスに何かを入力している間、私は私のドロップダウン要素がドロップダウンしたい、ユーザーが入力中の検索結果を見ることができます...

私はいくつかのを発見しました<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(''); 

プログラムで開くことができないからです。私のアドバイスは、これらのうちの1つを選択することですhttps://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/車輪を再発明しようとしないでください。