Why is my <Select> html element not updating properly after changing its content?-CodePudding

So I have a simple select element, which of course contains a bunch of option elements.

I'm making a simple search function in a text input field, which basically hides all option elements inside the select element that doesn't contain the search text. This works fine.

BUT, after I have hidden the necessary option elements and only shown the ones I want, there's a strange bug with the dropdown. When I click the dropdown (select element) after the changes have been made (hiding and showing option elements), it's empty on the first click. But if I click it again, it's updated correctly with the right visible option elements.

I've searched and searched and tried 20 different things to solve this annoying little issue, but I can't figure out why I have to click my dropdown twice before the changes are visible?

Can someone shed some light on this or offer a solution?

Here's some code, the option elements are dynamically created somewhere else but the code works fine for hiding/showing the option elements:

var timeoutId2;
$(document).on("input propertychange change", ".searchField", function() {
  clearTimeout(timeoutId2);

  var searchInput = $(this).val();

  if (searchInput == "") {
    $(".monsterOption").css("display", "block");
  } else {
    $(".monsterOption").css("display", "none");
    timeoutId2 = setTimeout(function() {
      $(".monsterOption").each(function(i, ele) {
        var monstername = $(this).data("monstername");
        if (monstername.toLowerCase().indexOf(searchInput.toLowerCase()) != -1) {
          $(".monsterDropdown").val(monstername);
          $(this).css("display", "block");
        }
      });
    }, 300);

  }
});

<input class="searchField" type="text" placeholder="search here">

<select class="monsterDropdown">
  <option class="monsterOption" data-monstername="Car 1">Car 1</option>
  <option class="monsterOption" data-monstername="Car 2">Car 2</option>
  <option class="monsterOption" data-monstername="Plane 1">Plane 1</option>
  <option class="monsterOption" data-monstername="Boat 1">Boat 1</option>
  <option class="monsterOption" data-monstername="Boat 2">Boat 2</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

CodePudding user response：

You are using setTimeout to show the results after 300 milliseconds, creating the illusion that the results only show up after expanding the select the second time.

Removing it should work:

var timeoutId2;
$(document).on("input propertychange change", ".searchField", function() {
  clearTimeout(timeoutId2);

  var searchInput = $(this).val();

  if (searchInput == "") {
    $(".monsterOption").css("display", "block");
  } else {
    $(".monsterOption").css("display", "none");
    $(".monsterOption").each(function(i, ele) {
      var monstername = $(this).data("monstername");
      if (monstername.toLowerCase().indexOf(searchInput.toLowerCase()) != -1) {
        $(".monsterDropdown").val(monstername);
        $(this).css("display", "block");
      }
    });
  }
});

<input class="searchField" type="text" placeholder="search here">

<select class="monsterDropdown">
  <option class="monsterOption" data-monstername="Car 1">Car 1</option>
  <option class="monsterOption" data-monstername="Car 2">Car 2</option>
  <option class="monsterOption" data-monstername="Plane 1">Plane 1</option>
  <option class="monsterOption" data-monstername="Boat 1">Boat 1</option>
  <option class="monsterOption" data-monstername="Boat 2">Boat 2</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>