Фильтр поиска JQuery не работает должным образом

Question

Функция поиска неправильно фильтрует результаты должным образом.Первая строка всегда отображается независимо от того, найдено или нет совпадение.

Ваша помощь приветствуется.

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        
        <table>
        <tr>

        <td class="col-nome">Ixpira</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">SunHotels</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>
        <td class="col-nome">World 2 Meet [W2M]</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">ImperatoreTravel.it</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        </table>
        <br />
        <input type="text" id="search" placeholder="  live search"></input>

Answer 1

Весь ваш код работает нормально, проблема возникает только в строке if (!index) return;,

index возвращает числа [0,1,2,3 ...] в$.each(), поэтому, когда была достигнута первая строка, индекс был 0, а !0 = 1, таким образом, условие , если было выполнено и возвращено без удаления первой строки.

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<table>
  <tr>

    <td class="col-nome">Ixpira</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>

    <td class="col-nome">SunHotels</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>
    <td class="col-nome">World 2 Meet [W2M]</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>

    <td class="col-nome">ImperatoreTravel.it</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

Answer 2

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        
        <table>
        <tr>

        <td class="col-nome">Ixpira</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">SunHotels</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>
        <td class="col-nome">World 2 Meet [W2M]</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">ImperatoreTravel.it</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        </table>
        <br />
        <input type="text" id="search" placeholder="  live search"></input>

Почему if (!index) return;?Будет пропущен первый элемент

index_of_first_element = 0;

if(!index_of_first_element){
 console.log('First element skipped');
} else {
 console.log('First element not skipped');
}

Answer 3

Я думаю, что ваш индекс возврата! Возвращается, когда 0. Я удалил его, и теперь он работает:

$("#search").keyup(function() {
  var value = this.value.toLowerCase().trim();

  $("table tr").each(function(index) {
    $(this).find("td").each(function() {
      var id = $(this).text().toLowerCase().trim();
      var not_found = (id.indexOf(value) == -1);
      $(this).closest('tr').toggle(!not_found);
      return not_found;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<table>
  <tr>

    <td class="col-nome">Ixpira</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>

    <td class="col-nome">SunHotels</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>
    <td class="col-nome">World 2 Meet [W2M]</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>

    <td class="col-nome">ImperatoreTravel.it</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

Answer 4

Я не совсем уверен, почему у вас есть эта строка в вашем коде:

if (!index) return;

, но это вызывает проблему.jQuery .each() основан на 0, поэтому первый элемент, через который он проходит, вызовет возврат функции (0 равно false).

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).parents('tr').toggle(!not_found);
            return not_found;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
        <tr>

        <td class="col-nome">Ixpira</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">SunHotels</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>
        <td class="col-nome">World 2 Meet [W2M]</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">ImperatoreTravel.it</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        </table>
        <br />
        <input type="text" id="search" placeholder="  live search">