javascript搜索函数，用于隐藏与输入不匹配的所有内容

我想实现一个搜索功能，它使用输入在我的页面上查找文本，而无需按enter键并隐藏与当前输入不匹配的所有内容

棘手的事情：我的页面上的文本在默认情况下是隐藏的，只有通过悬停其容器平铺才可见。整个页面也是由脚本构建的。结构如下：

<div id="data" class="grid-container">
<div class="grid-item">
    <div class="inside" id="item0">
        <h2 id="contents0" class="content-title" href="some link">some headline</h2>
        <div class="collapsing">
            <br>
            <table>
                <tbody>
                    <tr id="tr0">
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

}

---

但是它根本不起作用…

请检查内联注释以了解说明

//此函数将首先检查搜索值是否为空，然后
//它将获得所有可见的标签，并将其隐藏
函数findDom（val）{
如果（val==''）{
document.queryselectoral（'.showElem'）.forEach（函数（项）{
item.classList.remove（'showElem'））
})
回来
}
//否则，它将从每个标签中获取内容并进行检查
//如果内容包含搜索关键字，则会显示
//a
document.querySelectorAll（'.content'）.forEach（函数（项）{
//隐藏以前显示的标签
item.classList.remove（'showElem'））
//检查当前标记是否包含此文本
if（item.textContent.trim（）.includes（val））{
item.classList.add（'showElem'）
}
})
}
//这将获得在文本字段中输入的值
document.getElementById（'ip'）。addEventListener（'keyup'，（e）=>{
//等待2秒并搜索该值，如果没有超时，它将
//搜索输入的每个文本
setTimeout（函数（）{
findDom（e.target.value.trim（））
}, 2000)
})

.content{
显示：无；
}
肖维伦先生{
显示：块；
}

一些标题

我相信您正在寻找的stack overflow文章是这样的：我感谢您的努力，但函数必须隐藏与输入不匹配的所有内容。函数会隐藏所有内容，并在键入匹配项时显示。因此，如果输入为空，则不应隐藏任何内容。@T.Tom很乐意提供帮助。我想你可以稍微调整一下逻辑，使它符合你的要求。是按照@brk的建议做了之后，它仍然不起作用，还是你在某个点上被卡住了？brk的建议不完全是我需要的，所以我试着自己调整它。结果就在我问题的底部。

<input class="search" type="search" placeholder="Search" id="input">

<script>
        function findDom(val) {
            if (val === '') {
                document.querySelectorAll('.hideElem').forEach(function(item) {
                item.classList.remove('hideElem')
            })
            return;
            }
            document.querySelectorAll('.content').forEach(function(item) {
                if (item.textContent.trim().includes(val)) {
                    item.classList.remove('hideElem')
                }
                else {
                    item.classList.add('hideElem')
                }
            })
        }
        document.getElementById('input').addEventListener('keyup', (e) => {
            setTimeout(function() {
                findDom(e.target.value.trim())
            }, 2000)
        })
    </script>

.hideElem {
display: none;