隐藏输入字段中与值不匹配的元素，仅保留具有该值的元素

Question

我正在做一个小项目，在折叠的元素中搜索单词。如果找到，一些折叠的元素将打开以显示单词。

我想实现的下一件事是只保留包含它的li，并隐藏其他的。

我不知道如何进一步实现这一目标。我所尝试的，恰恰隐藏了我想要保留的元素。我可能需要一个循环，但我不知道如何写。

一切都发生在这里：

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");
}            
});
}

有人能帮我澄清一下吗？

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/popper.js@1.16.0/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>

Answer 1

您可以获取当前项目，并首先隐藏所有项目，然后显示匹配的列表项目，如

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/popper.js@1.16.0/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>

这一行el.parentNode.parentNode将选择相应的<li> ... </li>元素。

Answer 2

试试这段代码，它可以随心所欲地工作

刚刚在剧本所有其他代码保持不变。

<!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/popper.js@1.16.0/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() {
$('.timeline-compendium').show();
$('.timeline-compendium__content').show();
$('.timeline-type__content').show();
// 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");
}
});
var count = 0;
$(".timeline-type").each(function(i, el) {
var this_var = $(this);
$(this).show();
var visible_length = $(this).find('li:visible').length;
var id = $(this).find('.timeline-type__content').attr('id');
$(this).closest('.timeline-compendium').show();
if (visible_length == 0) {
if (id == "chapterB0") {
count++;
this_var.hide();
} else if (id == "chapterB2") {
count++;
this_var.hide();
if (count == 2) {
$(this).closest('.timeline-compendium').hide();
}
} else {
$(this).closest('.timeline-compendium').hide();
}
}
});
}
});
</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>