Использование фильтра jQuery вне элемента таблицы

Question

Я нашел много примеров того, как использовать фильтр jQuery для таблиц, но я не могу узнать, как это сделать для элементов, не находящихся внутри таблицы. Например, у меня есть карты, по которым я должен искать.

Я попытался адаптировать код из этого примера w3schools , и, кажется, он работает, когда я набираю слово «второй», но не слово «первый».

$(document).ready(function() {
            $("#txtSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#milestoneCard").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });

Мне было интересно, возможно ли это, и если да, то что мне придется изменить.

Я довольно долго искал, и хотя я уверен, что это возможно, я не могу понять, как в моем случае.

Я воспроизвел это в следующем jsfiddle

Answer 1

У вас есть несколько одинаковых идентификаторов на странице. Поэтому JS не будет работать так, как ожидалось. Идентификаторы уникальны, классы могут повторяться.

чтобы исправить это, попробуйте сделать milestoneCard классом вместо id в вашем html, как показано здесь

HTML

<input type="search" id="txtSearch">
<div class="col-md-4 milestoneCard">
    <div class="card card-body bg-light" style="margin-bottom: 1em;">
        <h3 id="searchTitle">First</h3>
        <p>{{description}}</p>
        <p>Due date:{{dueDate}}</p>
        <p>Completed date:{{compDate}}</p>
        <form action="/plannerHomepage" method="POST">
            <input type="hidden" name="compId" value="{{id}}">
            <input type="submit" role="button" class="btn btn-primary btn-lg" value="completed" style="margin-top:1em;" />
        </form>
    </div>
</div>
<div class="col-md-4 milestoneCard">
    <div class="card card-body bg-light" style="margin-bottom: 1em;">
        <h3 id="searchTitle">Second</h3>
        <p>{{description}}</p>
        <p>Due date:{{dueDate}}</p>
        <p>Completed date:{{compDate}}</p>
        <form action="/plannerHomepage" method="POST">
            <input type="hidden" name="compId" value="{{id}}">
            <input type="submit" role="button" class="btn btn-primary btn-lg" value="completed" style="margin-top:1em;" />
        </form>
    </div>
</div>

И ваш JavaScript

$(document).ready(function() {
    $("#txtSearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".milestoneCard").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Или посмотрите jsfiddle здесь

Answer 2

Вы используете один и тот же id для двух компонентов.
Измените его на class="col-md-4 milestoneCard" и ваш селектор на $(".milestoneCard"), и он будет работать.
Свойство id должно быть уникальным на всей странице, и селектор будет захватывать только первое найденное.