如何使文章的搜索栏使用HTML/CSS

Question

由于某些原因，我的搜索栏无法工作，我无法解决。这是搜索栏的代码：

<input id="searchbar" onkeyup="search_text()" type="text"
name="search" placeholder=" Search.."> 

这是文章的代码：

<section class="articles_section">
<div class="main_flexbox">
<div class="flexbox">



<div class="box1">
<img src="images/green_leaf1.jpg" class="box_image">
<hr class="thirdline">
<a class="link_text" href="#"><p class="aboutmetext2">HOW TO SUCCED IN COMBATING STRESS AND ANXIETY?</p>
</a> 
</div>

<div class="box1">
<img src="images/green_leaf3.jpg" class="box_image">
<hr class="thirdline">
<a class="link_text" href="#"><p class="aboutmetext2">HOW TO GET CONFIDENT IN YOURSELF?</p>
</a>
</div>

<div class="box1">
<img src="images/green_leaf1.jpg" class="box_image">
<hr class="thirdline">
<a class="link_text" href="#"><p class="aboutmetext2">HOW TO MANAGE TIME SHCEDULING?</p>
</a>
</div>
</div>
</div>
</section>

这是galleryfilter的Java脚本文件中的代码：

function search_text() { 
let input = document.getElementById('searchbar').value 
input=input.toLowerCase(); 
let x = document.getElementsByClassName('.box1'); 

for (i = 0; i < x.length; i++) {  
if (!x[i].innerHTML.toLowerCase().includes(input)) { 
x[i].style.display="none"; 
} 
else { 
x[i].style.display="block";                  
} 
} 

}

它应该根据框中段落的文本过滤文章(表示每个box1div(。提前谢谢！

Answer 1

function search_text() {
var input, filter, a, i, txtValue;
input = document.getElementById("searchbar");
filter = input.value.toUpperCase();
box1 = document.getElementById("box1");
a = box1.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
p = a[i].getElementsByTagName("p")[0];
txtValue = p.textContent || p.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}

<input id="searchbar" onkeyup="search_text()" type="text"
name="search" placeholder=" Search..">
<div id="box1">
<a class="link_text" href="#"><p class="aboutmetext2">HOW TO SUCCED IN COMBATING STRESS AND ANXIETY?</p>
</a> 

<a class="link_text" href="#"><p class="aboutmetext2">Create A Search List</p>

<a class="link_text" href="#"><p class="aboutmetext2">Step 1) Add HTML</p>

<a class="link_text" href="#"><p class="aboutmetext2">Style the input element and the list:</p>

<a class="link_text" href="#"><p class="aboutmetext2">Step 3) Add JavaScript:</p>

<a class="link_text" href="#"><p class="aboutmetext2">
Tip: Remove toUpperCase() if you want to perform a case-sensitive search.
</p>
</div>