如何仅为搜索过滤器JavaScript索引特定元素

Question

这是我在一个网站上的搜索过滤器脚本；它很简单，运行良好。

但是，如果我只想索引特定的元素，那么正确的方法是什么？

例如，只有id="type"和id="taste"，但不包括id="note"。

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

.item-row {
margin: 10px 0;
}
p {
line-height: 1.25em;
margin: 0px;
}

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<input type="text" id="filter"></input>
<div class="list-wrap">
<div class="item-row">
<p id="type">apple</p>
<p id="taste">sweet</p>
<p id="note">note: dummy text</p>
</div>
<div class="item-row">
<p id="type">orange</p>
<p id="taste">sour</p>
<p id="note">note: dummy text</p>
</div>
<div class="item-row">
<p id="type">pineapple</p>
<p id="taste">sour</p>
<p id="note">note: dummy text</p>
</div>
</div>

编辑：当显示"；过滤结果"；，需要显示完整的<div class="item-row">，如下所示：

input[苹果]
___
|苹果
|甜
|注释：伪文本
–
>松树水果
<酸味>
=注释：伪文字
-–

Answer 1

您应该使用类，因为id应该是unique，然后您可以在整个item-row组中使用filter，您可以在type和teste组上使用filter，如果input中有value，则隐藏note。

$(document).ready(function () {
$("#filter").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("div.item-row").filter(function () {
$(this).toggle($("> :not(.note)",this).text().toLowerCase().includes(value.toLowerCase()));
});
});
});

.item-row {
margin: 10px 0;
}
p {
line-height: 1.25em;
margin: 0px;
}

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<input type="text" id="filter"></input>
<div class="list-wrap">
<div class="item-row">
<p class="type">apple</p>
<p class="taste">sweet</p>
<p class="note">note: dummy text</p>
</div>
<div class="item-row">
<p class="type">orange</p>
<p class="taste">sour</p>
<p class="note">note: dummy text</p>
</div>
<div class="item-row">
<p class="type">pineapple</p>
<p class="taste">sour</p>
<p class="note">note: dummy text</p>
</div>
</div>

Answer 2

更新

在OP编辑了他们的问题后，我调整了我的脚本以完全解决它：

$(document).ready(function () {
$("#filter").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("div.item-row").filter(function () {
$(this).toggle($("p:not(.note)",this).text().toLowerCase().indexOf(value) > -1);
});
});
});

.item-row {
margin: 10px 0;
}
p {
line-height: 1.25em;
margin: 0px;
}

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<input type="text" id="filter"></input>
<div class="list-wrap">
<div class="item-row">
<p class="type">apple</p>
<p class="taste">sweet</p>
<p class="note">note: dummy text</p>
</div>
<div class="item-row">
<p class="type">orange</p>
<p class="taste">sour</p>
<p class="note">note: dummy text</p>
</div>
<div class="item-row">
<p class="type">pineapple</p>
<p class="taste">sour</p>
<p class="note">note: dummy text</p>
</div>
</div>

$("div.item-row").filter(function () {...})将遍历所有.item-rowdiv，并根据以下情况显示或隐藏它们：CCD_ 18。此表达式从当前div(this(中的所有(除了.note(<p>元素中收集小写.text()s，并查找其中出现的小写输入字符串。