Javascript列表过滤器-过滤时如何删除标题？

我有这支密码笔 这是一个简单的Javascript过滤器，取自

我想知道从过滤结果中删除标题最简单的方法是什么，所以如果搜索“名称”，那么标题结果都不会像当前那样显示

我认为编写一个javascript函数，在按下输入框中的一个键时，将样式显示更改为“无”会起作用：

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."
title="Type in a name"  onkeypress = "hideHeaders()">


 function hideHeaders(){ 
    document.getElementById("header").style.display = "none";
   }

但这似乎没有产生任何效果。为什么这不起作用，我应该怎么做才能使它起作用？

因为头不是一个id，而是一个类。您应按类别选择：

function hideHeaders() {
    document.querySelectorAll(".header").forEach(function(header) {
        header.style.display = "none";
    });
}

保持压痕清洁

顺便说一句，当没有按键时，这不会使标题返回到正常状态。如果有代码要隐藏它，则需要代码来显示它：

function hideHeaders(){ 
    setTimeout(function() {
        var empty= document.getElementById("myInput").value == "";
        document.querySelectorAll(".header").forEach(function(header) {
            header.style.display = empty?"block":"none";
        });
    }, 0);
}

超时是最后一次击键生效的时间，因为在更改值之前会触发keypress事件

它检查输入是否为空，并根据输入是否包含文本添加块或无显示样式

---

protip2：当您编写代码时，始终使用控制台选项卡中F12打开的开发人员工具运行代码。这样，当getElementById返回任何值并尝试设置任何值的样式时，您就会注意到一个错误。

效果很好：是否可以更改它，以便在没有搜索字母的情况下，如果搜索某个内容，则退格，使搜索栏为空，没有字母，标题会重新出现？我猜一个简单的if语句能起作用吗？@SteveJobs这是答案的第二部分：P@SteveJobs是的，当你退格时，按键盘不会开火。只需使用onkeyup。因为已经有一个onkeyup属性，所以您应该这样使用相同的属性：编辑：谢谢，只看到最近的评论，接受您的回答：我可以问一下，如果没有与搜索内容匹配的列表元素，您认为创建“未找到条目”结果的最简单方法是什么？