如何在博客页面中获取搜索栏以搜索选择性文章？

Question

I am working for my fitness website and I made a blog page where lots of articles are available now, I made a load more button to show more article and script is working fine, now the next thing is I want to put a search bar on top of the page so that user can able to see articles which he write in search bar. I made a script I don't know where is the problem

the code is given below

now the html code is:

<input type="text" id="inputarticle" onkeyup="myfunction()" size="162" placeholder="Enter the article name">

<div class="grid-container">
<div class="grid-hidden1">
            <img class="blog-cl-1-image">
            <h2 > <a href="fat.html">Importance of Fat for human Body</a> </h2>
            <h4>August 21 2019</h4>
            <p>When you eat fat in your diet the most important  thing that matters are the type of fat you eat. New research shows that healthy fats are important for optimal health.</p>
        </div>
        <div class="grid-hidden1">
            <img class="blog-cl-2-image">
            <h2> <a href="zinc.html">Role of Zinc in Human Body</a> </h2>
            <h4>August 21 2019</h4>
            <p>Zinc is an essential nutrient that plays an important role in the human body. As your body doesn’t produce zinc so it is essential to take it from food or supplements.</p>
        </div>
</div>

now the javascript is:-

function myfunction() {
  // Declare variables
  var input, filter, ul, h2, a,i, txtValue;
  input = document.getElementById("inputarticle");
  filter = input.value.toUpperCase();
  ul = document.getElementsByClassName("grid-container");
  h2 = ul.getElementsByTagName("h2");

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = h2[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      h2[i].style.display = "";
    } else {
      h2[i].style.display = "none";
    }
  }
}

I don't know where is the problem? please help

Answer 1

Try changing the following line in your for-loop if statement and see if it works:

h2[i].style.display = "";

to

h2[i].style.display = "block";

It's hard to know exactly what's going on without the full HTML file and logic. Also, not sure if this is a typo, but your HTML is missing an opening for the first sample item.

<div class="grid-hidden1">
        <img class="blog-cl-1-image">
        <h2 > <a href="fat.html">Importance of Fat for human Body</a> </h2>
        <h4>August 21 2019</h4>
        <p>When you eat fat in your diet the most important  thing that matters are the type of fat you eat. New research shows that healthy fats are important for optimal health.</p>
    **</div>** <-- MISSING OPENING DIV
    ...

Hope this helps!