Javascript Searches/ Filter nested looping search and exact matches with lots of text-CodePudding

EDIT: I forgot the searchbar and added it

Hello,

I am currently working on a way to filter through the text of a website. There are divs and inside the divs are p elements which contain text and also the inn tags, which are relevant for the search. My idea was to loop over the divs and then for each div loop through the p tags and then loop over the inn tags and then only display the div if there is a p tag which contains the inn tag with the match. I dont want a plug in solution and if possible in js or jquery since I only work with these two languages.

In short, I want to hide all divs with 0 matches and also hide all p tags with 0 matches and I want to compare the filter with the innerText of the inn tags.

I have been looking up the w3schools search filter option, but I feel like I got stuck and I would appreciate some help or also input on other ways on how to approach this problem. Another question that I have is, that if I search for Fig.1 I also get the matches for Fig. 10 or Fig. 12. Is there a way to only show exact matches?

HTML

<div >
   <input  id="myInputDesc" placeholder="Start Looking For Something!"
      type="text" />
   <a  onclick="searchMeDesc()">
      <svg height="30px" viewbox="0 0 30 30" width="30px" xmlns=" http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
         <g id="surface509077">
            <path
               d="M 13 3 C 7.488281 3 3 7.488281 3 13 C 3 18.511719 7.488281 23 13 23 C 15.398438 23 17.597656 22.148438 19.324219 20.734375 L 25.292969 26.707031 C 25.542969 26.96875 25.917969 27.074219 26.265625 26.980469 C 26.617188 26.890625 26.890625 26.617188 26.980469 26.265625 C 27.074219 25.917969 26.96875 25.542969 26.707031 25.292969 L 20.734375 19.320312 C 22.148438 17.597656 23 15.398438 23 13 C 23 7.488281 18.511719 3 13 3 Z M 13 5 C 17.429688 5 21 8.570312 21 13 C 21 17.429688 17.429688 21 13 21 C 8.570312 21 5 17.429688 5 13 C 5 8.570312 8.570312 5 13 5 Z M 13 5 "
               style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;">
            </path>
         </g>
      </svg>
   </a>
</div>
<div>
   <p>
      considerations for viable autonomous vehicle systems. The first is a standardization
      of safety assurance, including requirements that every self-driving car must satisfy
      to ensure safety, and how those requirements can be verified. The second is
      scalability, as engineering solutions that lead to unleashed costs will not scale to
      millions of cars and may prevent widespread or even not so widespread adoption of
      autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
      for safety assurance and a design of a system that adheres to safety assurance
      requirements while being scalable to millions of cars.
      <inn>Fig. 1</inn>
      considerations for viable autonomous vehicle systems. The first is a standardization
      of safety assurance, including requirements that every self-driving car must satisfy
      to ensure safety, and how those requirements can be verified. The second is
      scalability, as engineering solutions that lead to unleashed costs will not scale to
      millions of cars and may prevent widespread or even not so widespread adoption of
      autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
      for safety assurance and a design of a system that adheres to safety assurance
      requirements while being scalable to millions of cars.
      <inn>Fig. 12</inn>
   </p>
   <p>  The present disclosure relates generally to autonomous vehicle navigation. Additionally, this disclosure relates to systems and methods for navigating according to potential accident liability constraints.</p>
   <p>  considerations for viable autonomous vehicle systems. The first is a standardization
      of safety assurance, including requirements that every self-driving car must satisfy
      to ensure safety, and how those requirements can be verified. The second is
      scalability, as engineering solutions that lead to unleashed costs will not scale to
      millions of cars and may prevent widespread or even not so widespread adoption of
      autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
      for safety assurance and a design of a system that adheres to safety assurance
      requirements while being scalable to millions of cars.
   </p>
</div>
<div>
   <p>
      considerations for viable autonomous vehicle systems. The first is a standardization
      of safety assurance, including requirements that every self-driving car must satisfy
      to ensure safety, and how those requirements can be verified. The second is
      scalability, as engineering 
      <inn>Fig. 10</inn>
      solutions that lead to unleashed costs will not scale to
      millions of cars and may prevent widespread or even not so widespread adoption of
      autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
      for safety assurance and a design of a system that adheres to safety assurance
      requirements while being scalable to millions of cars.
   </p>
   <p>  considerations for viable autonomous vehicle systems. The first is a standardization
      of safety assurance, including requirements that every self-driving car must satisfy
      to ensure safety, and how those requirements can be verified. The second is
      scalability, as engineering solutions that lead to unleashed costs will not scale to
      millions of cars and may prevent widespread or even not so widespread adoption of
      autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
      for safety assurance and a design of a system that adheres to safety assurance
      requirements while being scalable to millions of cars.
   </p>
</div>

JS CODE


  //declare all variables needed
  var input, filter, figref, test;
  input = document.getElementById('myInputDesc');
  filter = input.value.toUpperCase().trim();
  figref = document.getElementsByTagName('figref');
  test = document.getElementsByTagName('div')

  for (j = 0; j < test.length; j  ) {
    p = test[j].getElementsByTagName("p");
    for (let i = 0; i < p.length; i  ) {
      fig = p[i].getElementsByTagName("inn");
      if (fig.length == 0) {
        p[i].style.display = "none";
      } else {
        for (let f = 0; f < fig.length; f  ) {
          ptxt = fig[f].innerText;
          console.log(ptxt)
          if (ptxt.toUpperCase() == filter) {
            console.log(p[i])
            p[i].style.display = "none";
          } else {
            console.log(test[j])

            p[i].style.display = "block";
          }
        }
      }
    }

  } ```

CodePudding user response：

So, I think the most efficient way to do this will be to just search for the <inn> elements, then select the nearest div ancestor. Something like:

const input = document.getElementById('myInputDesc');

const divs = input.querySelectorAll('inn').each(el => el.closest('div'))

Documentation for closest: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

mutatis mutandis for the p elements. Then you can apply a class to each div/p that has a match and hide the others.

If you need support for older browsers, see: Find the closest ancestor element that has a specific class