如何使文章搜索栏适用于 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";                  
    } 
} 

}

它应该通过框中段落中的文本过滤文章（代表每个 box1 div）。 预先感谢您！

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>

Answer 2

侯赛因·梅拉·拉赫巴尔 (Hussain Mera Rahbar)新卡兰 2023 |穆哈拉姆 ||穆夫提·赛义德·阿尔沙德·侯赛尼

        <div class="box" ><a href="video folder\125  adam khor.html"><img src="video folder\125  adam khor.jpg"  > <h2> ADAM KHOR آدم خور || New Kalaam 2023 || Mufti Saeed Arshad Al Hussaini </h2>  </a></div>


        <div class="box" ><a href="video folder\124  Umar ibn e Khatab.html"><img src="video folder\124  Umar ibn e Khtab.jpg"  > <h2>Umar ibn-e Khattab ؓ سیدنا عمر ابن الخطاب || New Kalaam 2023 || Mufti Saeed Arshad Al Hussaini </h2>  </a></div>

        <article class="box" ><a href="video folder\123  usman e ghani.html"><img src="video folder\123  usman e ghani.jpg"  > <h2>Usman e Ghani ؓعثمان غنی || New Kalaam 2023 || Mufti Saeed Arshad Al Hussaini </h2>  </a></article>

        <article class="box" ><a href="video folder\122  iqrar hogaya.html"><img src="video folder\122  iqrar hogya.jpg"  > <h2>iQrar HoGaya اقرار ہوگیا || New Kalaam 2023 || Mufti Saeed Arshad Al Hussaini </h2>  </a></article>

        <article class="box" ><a href="video folder\121  sadaqat abubakar.html"><img src="video folder\121  sadaqat abubakar.jpg"  > <h2>SadaQat AbuBakr ؓصداقت ابوبکر || New Kalaam 2023 || Mufti Saeed Arshad Al Hussaini</h2>  </a></article>

    <article class="box" ><a href="video folder\008  sitara insan tha.html"> <img src="video folder\008  sitara insan tha.jpg" ><h2> Sitara Insan Tha ( Bilal Khan ) || New Nazam ( 2019 ) || by Mufti Saeed Arshad Al Hussaini
    </h2> </a></article>
                            
     <article class="box" ><a href="video folder\007  sohna nam hy.html"><img src="video folder\007  sohna nam hy.jpg" ><h2>Sohna Nam hai Muavia (R.A) || New Manqabat 2019 || by Mufti Saeed Arshad Al Hussaini    
    </h2> </a></article>
    
     <article class="box" ><a href="video folder\006  abubakar da peyara ali.html">
    <img src="video folder\006  abubakar da peyara ali.jpg" ><h2>  Abubakr da Piyara ALi ALi (R.A) || New Manqabat 2019|| by Mufti Saeed Arshad Al Hussaini 
    </h2> </a></article>
                        
    <article class="box" ><a href="video folder\005  islam ki azmat.html"> <img src="video folder\005  islam ki azmat.jpg"> <h2>Islam ki Azmat k Nigehban Sahaba (R.Z)| New Manqabat 2019 || by Mufti Saeed Arshad Al Hussaini
    </h2> </a></article>
                        
    <article class="box" ><a href="video folder\004  tuba tuba.html"> <img src="video folder\004  tuba tuba.jpg"><h2>
    Tauba Tauba توبہ توبہ || New Nazam 2018 || Mufti Saeed Arshad Al Hussaini مفتی سعید ارشد الحسینی 
    </h2> </a></article>
                            
     <article class="box" ><a href="video folder\003  omar aya omar aya.html"><img src="video folder\003  umar umar.jpg" ><h2> 
    Omar Aaya Omar Aaya (R.A) عمرآیا عمرآیا || New Kalaam || Mufti Saeed Arshad Al Hussaini 
    </h2> </a></article>
    
    <article class="box" ><a href="video folder\002  ly k nam e wafa.html"> <img src="video folder\002  ly k nam e wafa.jpg" > <h2>  Ly ky Nam-e Wafa - لےکے نام وفا || New Nazam || by Mufti Saeed Arshad Al Hussaini 
    </h2> </a></article>
                        
     <article class="box" > <a href="video folder\001  mera vijdan pakistan.html"><img src="video folder\001  mera wijdan pakistan.jpg"> <h2>  Mera Vijdan Pakistan میراوجدان پاکستان || New Milli Tarana 2018 || by Mufti Saeed Arshad Al Hussaini</h2> </a></article>