时间戳

首页 > 解决方案 > 如何在博客页面中获取搜索栏以搜索精选文章？

javascript - 如何在博客页面中获取搜索栏以搜索精选文章？

问题描述

我正在为我的健身网站工作，我创建了一个博客页面，现在有很多文章，我做了一个加载更多按钮来显示更多文章，脚本工作正常，现在接下来我想放一个搜索栏页面顶部，以便用户能够看到他在搜索栏中写的文章。我做了一个脚本我不知道问题出在哪里

代码如下

现在的html代码是：

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

现在的javascript是： -

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

不知道问题出在哪里？请帮忙

标签： javascripthtmlcss

解决方案

尝试更改 for-loop if 语句中的以下行，看看它是否有效：

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

至

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

如果没有完整的 HTML 文件和逻辑，很难确切知道发生了什么。此外，不确定这是否是错字，但您的 HTML 缺少第一个示例项目的开口。

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

希望这可以帮助！

推荐阅读