Home > front end >  Hide elements that don't match value from input field and keep only ones that have it
Hide elements that don't match value from input field and keep only ones that have it

Time：12-03

I'm doing a small project where I'm searching for words in collapsed elements. If found, some collapsed elements are opening to display the word.

The next thing I would like to achieve is to keep only the li that contain it and hide the others.

I'm not sure how to proceed further to achieve this. What I've tried, hides exactly the element found which in fact, I want to keep. I might need a loop but I'm not sure how to write it.

Everything happens here:

function showWordsFound() {
        const word = document.getElementById("searchedWord").value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&');
        const r = new RegExp("("   word   ")", "ig");
        $(".reports-list-item__title--compendium").each(function(i) {
            if ($(this).text().match(r)) {
                let matches = $(this).text().match(r);
                console.log(matches);
                console.log(typeof matches);
                $.each(matches, function () {
                    occurrences.push(i);
                });
                // hide element not matching the word found
                // $(this).parent().hide();
                $(this).closest(".timeline-compendium__content").collapse("show");
                $(this).closest(".timeline-type .timeline-type__content").collapse("show");
            }            
        });
    }

Can someone help me clarify this?

Show code snippet

var i = 0;

$(document).on("click", "#findWord", function(e) {
  let occurrences = [];

  //reset i
  i = 0;

  const x = document.getElementById("searchedWord").value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&');
  let error = document.querySelector("#message");

  if (x == "") {
    error.style.display = "block";
    error.style.color = "red";
  } else {
    error.style.display = "none";
    showWordsFound();
  }

  let clickClear = document.querySelector("#clear");

  clickClear.addEventListener("click", clear);

  function clear() {
    // get the search term from the input
    let clickInput = document.querySelector("#searchedWord");
    clickInput.value = "";
    var spans = $(".reports-list-item__title--compendium > mark");
    spans.each(function() {
      spans.contents().unwrap();
    });
    occurrences.splice(0, occurrences.length);
    // reset our labels
    $(".timeline-compendium__content").collapse("hide");
    $(".timeline-type .timeline-type__content").collapse("hide");
  }

  function showWordsFound() {
    // create a regex from our term
    const word = document.getElementById("searchedWord").value;
    const r = new RegExp("("   word   ")", "ig");
    $(".reports-list-item__title--compendium").each(function(i) {
      if ($(this).text().match(r)) {
        // get all the matches
        var matches = $(this).text().match(r);
        $.each(matches, function() {
          // push the index of this section onto the array
          occurrences.push(i);

          // // Trying to hide elements that don't contain Summary
          $(this).closest('li').hide();

          // console.log(occurrences);
        });
        $(this).closest(".timeline-compendium__content").collapse("show");
        $(this).closest(".timeline-type .timeline-type__content").collapse("show");
      }
    });
  }

});
.found {
  background-color: yellow;
}

#labels {
  margin-left: 15px;
  font-size: 16px;
}

.timeline-compendium {
  margin-left: 2rem;
}

.timeline-type__header {
  width: 400px;
  height: 50px;
  background-color: rgb(46, 177, 100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid white;
}

.timeline-type__header:hover {
  color: white;
  background-color: rgb(35, 119, 70);
}

#tab-content {
  border: 1px solid red;
}

input[type=text] {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input#findWord {
  background-color: rgb(248, 211, 3);
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#clear {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 20px;
  right: 150px;
  line-height: 25px;
  font-size: 14px;
  padding-left: 8px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 50%;
}

#message {
  display: none;
  font-size: 1em;
}

#btnNext {
  margin-left: 0.5rem;
}

mark {
  background-color: yellow !important;
}

.stickyBar {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row stickyBar">
    <div class="col-sm-12 mb-2">
      <div id="searchForm" class="d-flex flex-column">
        <label for="searchedWord">
          <ul>
            <li>Search for 'summary' (done)</li>
            <li>open collapsed items that contain it (done)</li>
            <li>hide other elements that don't have the word from input field (ex: No link, some content with link, second cool) </li>
          </ul>
        </label>
        <div class="col-sm-12 p-0 d-flex ">
          <input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />
          <button type="submit" id="findWord" class="btn btn-primary">Search</button>
          <div id="clear" role="button">X</div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 mb-2">
      <div id="labels">
        <small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
          <div class="row align-items-center">
            <div class="col-auto">1<sup>st</sup> collapsible item</div>
            <div class="col"><span></span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="introduction">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">1</div>
                      <div class="col timeline-type__title">First nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="foreword">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 2 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
          <div class="row align-items-center">
            <div class="col-auto">2<sup>nd</sup></div>
            <div class="col"><span>collapsible item</span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="titleA">
          <div class="timeline-type">
            <a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">2</div>
                      <div class="col timeline-type__title">Second nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="summary">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Summary
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 3 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
          <div class="row align-items-center">
            <div class="col-auto">3<sup>rd</sup></div>
            <div class="col"><span>collapsible item</span>
            </div>
            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
          </div>
        </a>

        <div class="timeline-compendium__content collapse" id="titleB">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">3</div>
                      <div class="col timeline-type__title">Third nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB0">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link cool summary
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">4</div>
                      <div class="col timeline-type__title">Fourth nested collapsible
                      </div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB2">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can get the current item and make all the items to hide first and then display the matched list item like,

var i = 0;

$(document).on("click", "#findWord", function(e) {
  let occurrences = [];

  //reset i
  i = 0;

  const x = document.getElementById("searchedWord").value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&');
  let error = document.querySelector("#message");

  if (x == "") {
    error.style.display = "block";
    error.style.color = "red";
  } else {
    error.style.display = "none";
    showWordsFound();
  }

  let clickClear = document.querySelector("#clear");

  clickClear.addEventListener("click", clear);

  function clear() {
    // get the search term from the input
    let clickInput = document.querySelector("#searchedWord");
    clickInput.value = "";
    var spans = $(".reports-list-item__title--compendium > mark");
    spans.each(function() {
      spans.contents().unwrap();
    });
    occurrences.splice(0, occurrences.length);
    // reset our labels
    $(".timeline-compendium__content").collapse("hide");
    $(".timeline-type .timeline-type__content").collapse("hide");
  }

  function showWordsFound() {
    // create a regex from our term
    const word = document.getElementById("searchedWord").value;
    const r = new RegExp("("   word   ")", "ig");
    $(".reports-list-item__title--compendium").each(function(i, el) {
       el.parentNode.parentNode.style.display = "none"
      if ($(this).text().match(r)) {
        // get all the matches
        var matches = $(this).text().match(r);
        $.each(matches, function() {
          // push the index of this section onto the array
          occurrences.push(i);

          // // Trying to hide elements that don't contain Summary
          $(this).closest('li').hide();

          el.parentNode.parentNode.style.display = "list-item"

        });
        $(this).closest(".timeline-compendium__content").collapse("show");
        $(this).closest(".timeline-type .timeline-type__content").collapse("show");
      }
    });
  }

});
.found {
  background-color: yellow;
}

#labels {
  margin-left: 15px;
  font-size: 16px;
}

.timeline-compendium {
  margin-left: 2rem;
}

.timeline-type__header {
  width: 400px;
  height: 50px;
  background-color: rgb(46, 177, 100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid white;
}

.timeline-type__header:hover {
  color: white;
  background-color: rgb(35, 119, 70);
}

#tab-content {
  border: 1px solid red;
}

input[type=text] {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input#findWord {
  background-color: rgb(248, 211, 3);
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#clear {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 20px;
  right: 150px;
  line-height: 25px;
  font-size: 14px;
  padding-left: 8px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 50%;
}

#message {
  display: none;
  font-size: 1em;
}

#btnNext {
  margin-left: 0.5rem;
}

mark {
  background-color: yellow !important;
}

.stickyBar {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row stickyBar">
    <div class="col-sm-12 mb-2">
      <div id="searchForm" class="d-flex flex-column">
        <label for="searchedWord">
          <ul>
            <li>Search for 'summary' (done)</li>
            <li>open collapsed items that contain it (done)</li>
            <li>hide other elements that don't have the word from input field (ex: No link, some content with link, second cool) </li>
          </ul>
        </label>
        <div class="col-sm-12 p-0 d-flex ">
          <input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />
          <button type="submit" id="findWord" class="btn btn-primary">Search</button>
          <div id="clear" role="button">X</div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 mb-2">
      <div id="labels">
        <small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
          <div class="row align-items-center">
            <div class="col-auto">1<sup>st</sup> collapsible item</div>
            <div class="col"><span></span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="introduction">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">1</div>
                      <div class="col timeline-type__title">First nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="foreword">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 2 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
          <div class="row align-items-center">
            <div class="col-auto">2<sup>nd</sup></div>
            <div class="col"><span>collapsible item</span></div>
            <div class="col-auto">
              <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
              <span class="sr-only">Collapse/expand this item</span>
            </div>
          </div>
        </a>
        <div class="timeline-compendium__content collapse" id="titleA">
          <div class="timeline-type">
            <a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">2</div>
                      <div class="col timeline-type__title">Second nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="summary">
              <ul class="reports-list">
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Summary
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- section 3 -->
      <section class="timeline-compendium">
        <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
          <div class="row align-items-center">
            <div class="col-auto">3<sup>rd</sup></div>
            <div class="col"><span>collapsible item</span>
            </div>
            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
          </div>
        </a>

        <div class="timeline-compendium__content collapse" id="titleB">
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">3</div>
                      <div class="col timeline-type__title">Third nested collapsible</div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB0">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link cool summary
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
                <li>
                  <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="timeline-type">
            <a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
              <div class="row no-gutters align-items-center">
                <div class="col">
                  <div class="timeline-type__header timeline-type__header--title">
                    <div class="row align-items-center">
                      <div class="col-auto timeline-type__chapter">4</div>
                      <div class="col timeline-type__title">Fourth nested collapsible
                      </div>
                      <div class="col-auto">
                        <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                        <span class="sr-only">Collapse/expand this item</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <div class="timeline-type__content collapse" id="chapterB2">
              <ul class="reports-list">
                <li>
                  <a class="reports-list-item reports-list-item--compendium">
                    <div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
                  </a>
                </li>
                <li>
                  <a href="#" class="reports-list-item reports-list-item--compendium">
                    <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                      Some content with link
                    </div>
                    <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This line el.parentNode.parentNode will select the respective <li> ... </li> element.

CodePudding user response：

Try this code, it's working as you want.

Just done a few changes in the function showWordsFound() in the script. All other code remains the same.

<!DOCTYPE html>
<html>

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <style>
        .found {
            background-color: yellow;
        }
        
        #labels {
            margin-left: 15px;
            font-size: 16px;
        }
        
        .timeline-compendium {
            margin-left: 2rem;
        }
        
        .timeline-type__header {
            width: 400px;
            height: 50px;
            background-color: rgb(46, 177, 100);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            border: 1px solid white;
        }
        
        .timeline-type__header:hover {
            color: white;
            background-color: rgb(35, 119, 70);
        }
        
        #tab-content {
            border: 1px solid red;
        }
        
        input[type=text] {
            width: 80%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
        }
        
        input#findWord {
            background-color: rgb(248, 211, 3);
            border: none;
            color: black;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
        
        #clear {
            width: 25px;
            height: 25px;
            position: absolute;
            top: 20px;
            right: 150px;
            line-height: 25px;
            font-size: 14px;
            padding-left: 8px;
            font-weight: bold;
            cursor: pointer;
            color: #fff;
            background-color: red;
            border: none;
            border-radius: 50%;
        }
        
        #message {
            display: none;
            font-size: 1em;
        }
        
        #btnNext {
            margin-left: 0.5rem;
        }
        
        mark {
            background-color: yellow !important;
        }
        
        .stickyBar {
            position: sticky;
            top: 0;
            z-index: 1;
            background-color: white;
        }
    </style>

    <script>
        var i = 0;

        $(document).on("click", "#findWord", function(e) {
            let occurrences = [];

            //reset i
            i = 0;

            const x = document.getElementById("searchedWord").value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&');
            let error = document.querySelector("#message");

            if (x == "") {
                error.style.display = "block";
                error.style.color = "red";
            } else {
                error.style.display = "none";
                showWordsFound();
            }

            let clickClear = document.querySelector("#clear");

            clickClear.addEventListener("click", clear);

            function clear() {
                // get the search term from the input
                let clickInput = document.querySelector("#searchedWord");
                clickInput.value = "";
                var spans = $(".reports-list-item__title--compendium > mark");
                spans.each(function() {
                    spans.contents().unwrap();
                });
                occurrences.splice(0, occurrences.length);
                // reset our labels
                $(".timeline-compendium__content").collapse("hide");
                $(".timeline-type .timeline-type__content").collapse("hide");
            }

            function showWordsFound() {
                // create a regex from our term
                const word = document.getElementById("searchedWord").value;
                const r = new RegExp("("   word   ")", "ig");
                $(".reports-list-item__title--compendium, .reports-list-item__title--nolink").each(function(i, el) {
                    el.parentNode.parentNode.style.display = "none"
                    if ($(this).text().match(r)) {
                        // get all the matches
                        var matches = $(this).text().match(r);
                        $.each(matches, function() {
                            // push the index of this section onto the array
                            occurrences.push(i);
                            // // Trying to hide elements that don't contain Summary
                            $(this).closest('li').hide();
                            el.parentNode.parentNode.style.display = "list-item"
                        });
                        $(this).closest(".timeline-compendium__content").collapse("show");
                        $(this).closest(".timeline-type .timeline-type__content").collapse("show");
                    }
                });
            }

        });
    </script>
</head>

<body>
    <div class="container">
        <div class="row stickyBar">
            <div class="col-sm-12 mb-2">
                <div id="searchForm" class="d-flex flex-column">
                    <label for="searchedWord">
            <ul>
              <li>Search for 'summary' (done)</li>
              <li>open collapsed items that contain it (done)</li>
              <li>hide other elements that don't have the word from input field (ex: No link, some content with link,
                second cool) </li>
            </ul>
          </label>
                    <div class="col-sm-12 p-0 d-flex ">
                        <input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="summary" class="form-control form-control-lg" />
                        <button type="submit" id="findWord" class="btn btn-primary">Search</button>
                        <div id="clear" role="button">X</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 mb-2">
                <div id="labels">
                    <small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <section class="timeline-compendium">
                    <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
                        <div class="row align-items-center">
                            <div class="col-auto">1<sup>st</sup> collapsible item</div>
                            <div class="col"><span></span></div>
                            <div class="col-auto">
                                <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
                                <span class="sr-only">Collapse/expand this item</span>
                            </div>
                        </div>
                    </a>
                    <div class="timeline-compendium__content collapse" id="introduction">
                        <div class="timeline-type">
                            <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
                                <div class="row no-gutters align-items-center">
                                    <div class="col">
                                        <div class="timeline-type__header timeline-type__header--title">
                                            <div class="row align-items-center">
                                                <div class="col-auto timeline-type__chapter">1</div>
                                                <div class="col timeline-type__title">First nested collapsible</div>
                                                <div class="col-auto">
                                                    <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                                                    <span class="sr-only">Collapse/expand this item</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="timeline-type__content collapse" id="foreword">
                                <ul class="reports-list">
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool
                                            </div>
                                            <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- section 2 -->
                <section class="timeline-compendium">
                    <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
                        <div class="row align-items-center">
                            <div class="col-auto">2<sup>nd</sup></div>
                            <div class="col"><span>collapsible item</span></div>
                            <div class="col-auto">
                                <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
                                <span class="sr-only">Collapse/expand this item</span>
                            </div>
                        </div>
                    </a>
                    <div class="timeline-compendium__content collapse" id="titleA">
                        <div class="timeline-type">
                            <a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
                                <div class="row no-gutters align-items-center">
                                    <div class="col">
                                        <div class="timeline-type__header timeline-type__header--title">
                                            <div class="row align-items-center">
                                                <div class="col-auto timeline-type__chapter">2</div>
                                                <div class="col timeline-type__title">Second nested collapsible</div>
                                                <div class="col-auto">
                                                    <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                                                    <span class="sr-only">Collapse/expand this item</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="timeline-type__content collapse" id="summary">
                                <ul class="reports-list">
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Summary
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- section 3 -->
                <section class="timeline-compendium">
                    <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
                        <div class="row align-items-center">
                            <div class="col-auto">3<sup>rd</sup></div>
                            <div class="col"><span>collapsible item</span>
                            </div>
                            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
                        </div>
                    </a>

                    <div class="timeline-compendium__content collapse" id="titleB">
                        <div class="timeline-type">
                            <a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
                                <div class="row no-gutters align-items-center">
                                    <div class="col">
                                        <div class="timeline-type__header timeline-type__header--title">
                                            <div class="row align-items-center">
                                                <div class="col-auto timeline-type__chapter">3</div>
                                                <div class="col timeline-type__title">Third nested collapsible</div>
                                                <div class="col-auto">
                                                    <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                                                    <span class="sr-only">Collapse/expand this item</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="timeline-type__content collapse" id="chapterB0">
                                <ul class="reports-list">
                                    <li>
                                        <a class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Some content with link cool summary
                                            </div>
                                            <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Some content with link
                                            </div>
                                            <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="timeline-type">
                            <a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
                                <div class="row no-gutters align-items-center">
                                    <div class="col">
                                        <div class="timeline-type__header timeline-type__header--title">
                                            <div class="row align-items-center">
                                                <div class="col-auto timeline-type__chapter">4</div>
                                                <div class="col timeline-type__title">Fourth nested collapsible
                                                </div>
                                                <div class="col-auto">
                                                    <em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
                                                    <span class="sr-only">Collapse/expand this item</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="timeline-type__content collapse" id="chapterB2">
                                <ul class="reports-list">
                                    <li>
                                        <a class="reports-list-item reports-list-item--compendium">
                                            <div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="reports-list-item reports-list-item--compendium">
                                            <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                                Some content with link
                                            </div>
                                            <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</body>

</html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/frontend/214690.html

Prev:How do you hide/show forms based on select element using jQuery and Bootstrap v5
Next:trigger click event when input is checked by default jquery
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding