时间戳

首页 > 解决方案 > 如何使文章的搜索栏工作 HTML/CSS

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

问题描述

由于某些原因，我的搜索栏无法正常工作，我无法弄清楚。这是搜索栏的代码：

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

这是画廊过滤器的 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）。先感谢您！

标签： javascripthtmlcsssearchbar

解决方案

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>

推荐阅读