The first table row (dynamically generated) always shows, no matter the input value for Javascript-CodePudding

Sorry for asking, I am probably missing something small here but have no clue. I dynamically generated a long list of radio buttons using PHP. On top of the list is an HTML input to search through the list using jQuery. This works, except for one tiny detail. The first radio button in the list always shows, no matter what the search result is. Even if I type something completely different, I will always see the first radio button in the list together with the matching results.

What is going wrong here?

This is my dynamically generated list of radio buttons, using HTML and PHP:

<input id="addplantSearch" class="form-control" type="text" name="addplantsearch" placeholder="Zoek op (Latijnse) naam..." style="margin:0; height:48px;"> <!-- Search input -->

<?php
  $query = "SELECT * FROM plants ORDER BY plants.name ASC;";
  $post_data = $data->execute($query);
  // Prepared statement in 'execute' method (Database class)
?>

<div class="addplant-list">

  <?php
    foreach ($post_data as $post) {
      # Loop start
  ?>
  
  <div class="searchable">
    <label class="pselect-container"> <?php echo $post['name']; ?>
      <input type="radio" name="selectPlant" value="<?php echo $post['plant_id']; ?>">
      <span class="pselect-checkmark" style="width:100%;">
        <img src="../system/src/img/plants/<?php echo $post['directory']; ?>/icon.png" />
        <?php echo $post['name'] . " - (" . $post['name_latin'] . ")"; ?>
      </span>
    </label>
  </div>

  <?php
      # Loop end
    }
  ?>
  
</div>

And this is my jQuery, responsible for searching through the list:

$("#addplantSearch").keyup(function() {
  var value = this.value;
  $(".addplant-list").find(".searchable").each(function(index) {
    if (!index) return;
    var id = $(this).find("span").first().text();
    $(this).toggle(id.indexOf(value) !== -1);
  });
});

EDIT: The first item in the list is determined by the alphabetical order (ASC) of my database results (see $query variable). So this is always the same item in alphabetical order.

CodePudding user response：

It looks like your issue is with your if statement.

if (!index) return;

This problem occurs because JavaScript uses 0 based arrays, and 0 is also a falsy value. Meaning:

!0 === true

and the first item in the array will always return out of the function and won't be applicable to the toggle logic.

So probably a lot of ways to work around this, one would be to check the length of the array before the each function. Ex:

$("#addplantSearch").keyup(function() {
    var value = this.value;
    var searchableItems = $(".addplant-list").find(".searchable");

    if (searchableItems.length) {
        searchableItems.each(function(index) {
            var id = $(this).find("span").first().text();
            $(this).toggle(id.indexOf(value) !== -1);
        });
    }    
});