Question 36789 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to index specific elements only for a search filter JavaScript? – Jquery

Here is my search filter script on a website; it is simple and works fine.

But if I would like to index specific elements only, what is the right way to do so?

Just for example, only id="type" and id="taste", but not include 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/[email protected]/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>

Edit: When displaying the "filtered results", showing the complete <div class="item-row"> is needed, like this:

input [ apple ] ___
| apple
| sweet
| note: dummy text
–––
| pineapple
| sour
| note: dummy text
–––

Tags:

2

Answers


  1. 0

    You should use classes instead, as the id should be unique, then instead you filter the whole item-row group, you can filter on type and teste group, And hide note if there is a value in the input.

    $(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/[email protected]/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>
    Login or Signup to reply.
  2. 0

    UPDATE

    After OP edited their question I adjusted my script to fully address it:

    $(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/[email protected]/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>

    The $("div.item-row").filter(function () {...}) will go through all the.item-rowdivs and will either show or hide them depending on:
    $("p:not(.note)",this).text().toLowerCase().indexOf(value) > -1. This expression collects the lowercase .text()s from all (but the .note) <p> elements in the current div (this) and looks for an occurence of the lowercase input string in it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search