如何在JavaScript搜索筛选器中仅索引指定元素？

首先要修正一个HTML规范错误：页面中id不能重复，你的代码里每个.item-row下都用了相同的id="type"/taste/note，这会导致jQuery选择器无法正确选中所有目标元素，需要把这些id改成class。

以下是修正并实现需求的完整代码：

修改后的HTML #

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<input type="text" id="filter">
<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>

修改后的JavaScript #

$(document).ready(function () {
  $("#filter").on("keyup", function () {
    var value = $(this).val().toLowerCase().trim();
    // 遍历所有item-row
    $(".item-row").each(function () {
      // 仅提取当前行内type和taste的文本内容，拼接成字符串
      var targetText = $(this).find(".type, .taste").text().toLowerCase();
      // 根据匹配结果控制行的显示/隐藏
      $(this).toggle(targetText.indexOf(value) > -1);
    });
  });
});

CSS（无需修改） #

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

关键修改说明 #

1. HTML规范修正：将重复的id改为class，确保选择器能正确定位所有目标元素。
2. 筛选逻辑调整：不再使用整个.item-row的文本内容，而是通过find(".type, .taste")仅提取需要建立索引的元素文本，完全排除.note的内容。
3. 体验优化：增加trim()去除搜索输入的首尾空格，避免空字符导致的误判。

这样修改后，搜索时只会匹配type和taste的内容，筛选结果会完整显示整个.item-row（包括note部分），完全符合你的需求。

内容的提问来源于stack exchange，提问作者Anthony