How to select the first option in filtered html select field

user_14680818 0
Viewed 47

My code:

<input class="form-control" id="myInput" type="text" placeholder="Search.."/>

<select autofocus="True" class="form-control  form-select select" id="asortyment" name="asortyment">
  <option value="493">Berlin</option>
  <option value="494">Warsaw</option>
  <option value="495">New York</option>
  <option value="496">Moscow</option>
  <option value="497">London</option>
  <option value="498">Paris</option>
  <option value="499">Wien</option>
</select>

script

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
   
    var value = $(this).val().toLowerCase();
    var asortyment_tmp = document.getElementById('asortyment');
    $("#asortyment option").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });

After typing any letter, select is filtered but the previous option doesn't change automatically.

I tried almost everything. Select is changing after setting selectedIndex but I if I set it to 0 the value change to the first option, but before the list was filtered.

https://jsfiddle.net/Lxd51ans/3/

html jquery javascript
1 Answers

I think the biggest confusion is that typically when setting selects, you do so by the value (and you use numbers for values here). Here is my amendment to your code that should get you on the right track (but will still need some customization to make it right for your scenario).

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    if(value.length==0){
      $('#asortyment').prop('selectedIndex',0);
      return;
    }
    var asortyment_tmp = document.getElementById('asortyment');
    $("#asortyment option").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
    $("#asortyment option").filter(function() {
      return $(this).text().toLowerCase().indexOf(value) > -1;
    }).prop('selected', true)
    
    
    
    

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" id="myInput" type="text" placeholder="Search..">

<select autofocus="True" class="form-control  form-select select" id="asortyment" name="asortyment"><option value="493">Berlin</option><option value="494">Warsaw</option><option value="495">New York</option><option value="496">Moscow</option><option value="497">London</option><option value="498">Paris</option><option value="499">Wien</option></select>

user_50015860
Related