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

Question

My search bar is not working for some reasons, i cannot figure it out. This is the code for search bar:

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

This is the code for the article:

<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>

And this is the code from the Java script file for the galleryfilter:

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

}

It should filter the articles(which represents every box1 div) by the text from the paragraph in the box. Thank you in advance!

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>