在表元素之外使用jQuery过滤器

时间:2018-04-28 02:24:56

标签: javascript jquery html search filter

我已经找到了很多关于如何在表上使用jQuery过滤器的示例,但我无法找到如何在不在表内的项目上执行此操作。例如,我有卡片,我必须搜索。

我试图改编this w3schools example的代码,当我输入'second'这个词而不是'first'这个词时它似乎有用。

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

我想知道这是否可能,如果是的话,我必须改变。

我搜索了很多,虽然我确信这是可能的,但我似乎无法找到我的情况。

我已在以下jsfiddle

中复制了它

2 个答案:

答案 0 :(得分:0)

您对两个组件使用相同的id 将其更改为class="col-md-4 milestoneCard",将您的选择器更改为$(".milestoneCard"),这样就可以了 id属性在整个页面中应该是唯一的,而选择器只会抓取它找到的第一个属性。

答案 1 :(得分:0)

页面上有多个相同的ID。因此JS将无法按预期工作。 ID是唯一的,类可以重复。

要解决此问题,请尝试将milestoneCard设为类,而不是html中的id,如此处所示

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 here