Javascript 根据搜索输入隐藏和显示div

当搜索字段中有任何输入时，我一直试图隐藏标题maindiv。但出于某种原因，它不起作用

我一直试图在搜索中没有输入时显示

标题main

div，在有任何搜索输入时隐藏

const searchBar=document.forms['search-books'].querySelector（'input'）；
searchBar.addEventListener（'keyup'，函数（e）{
const term=e.target.value.toLocaleLowerCase（）；
const books=document.getElementsByTagName（'h5'）；
var notAvailable=document.getElementById（'notAvailable'）；
var hasResults=false；
数组.from（books）.forEach（函数（book）{
const title=book.textContent；
if（title.toLowerCase（）.indexOf（term）！=-1）{
book.parentElement.parentElement.style.display='flex'；
hasResults=true；
}否则{
book.parentElement.parentElement.style.display='none'；
}
});
notAvailable.style.display=hasResults？'none'：'block'；
});
if（$（'#search'）.val.length==0）{
$（“#titleMain”）.show（）；
}否则{
$（“#titleMain”）.hide（）；
}

书单
饥饿游戏


哈利·波特
对不起，这本书还没有添加

您只需将显示和隐藏代码移动到事件侦听器中，以便它在每次输入更改时运行。除此之外，看起来是正确的

val

是一个需要调用-

$（“#搜索”）.val（）.length

的方法

$（“#search”）.val.length

将为您提供

val

-所需的参数数。

您需要在事件处理程序中检查搜索输入。您也没有检查输入本身的值。使用

if（$（'input'）.val（）.length==0）{

。可以使用

$（“#titleMain”）显示/隐藏一行代码。切换（$（'input'）.val（）.length==0）；

：

例如：

const searchBar=document.forms['search-books'].querySelector（'input'）；
searchBar.addEventListener（'keyup'，函数（e）{
const term=e.target.value.toLocaleLowerCase（）；
const books=document.getElementsByTagName（'h5'）；
var notAvailable=document.getElementById（'notAvailable'）；
$（“#titleMain”）.toggle（$（'input'）.val（）.length==0）；
var hasResults=false；
数组.from（books）.forEach（函数（book）{
const title=book.textContent；
if（title.toLowerCase（）.indexOf（term）！=-1）{
book.parentElement.parentElement.style.display='flex'；
hasResults=true；
}否则{
book.parentElement.parentElement.style.display='none'；
}
});
notAvailable.style.display=hasResults？'none'：'block'；
})；

书单
饥饿游戏


哈利·波特
对不起，这本书还没有添加

我不明白你在问什么。你的

titleMain

div从一开始就被隐藏了。这就是问题所在。我希望

titleMain

div在搜索中没有输入时显示，在有搜索输入时隐藏。@j08691Wow！是的，这两种方法都很完美。当我有输入时，单行代码是最好的选择该页面上没有其他输入字段。如果我决定放置其他输入字段，我可能会选择更具体但更长的输入字段。非常感谢您的解释。：）