Javascript Jquery，搜索并显示隐藏的div

我正在做一个杂货清单，在那里你可以搜索并添加杂货到你的清单。我的杂货项目从MySQL表填充，文本添加到名为“foodcard”的div中。我的Jquery脚本几乎完全按照我的要求工作，除了所有150多张卡片都是可见的，并且只有当您开始在输入框中键入时，卡片才会隐藏并在相关搜索词中淡出。我不知道如何在页面加载时隐藏卡片并只显示搜索词。我会给你我所有的代码，但请告诉我，如果我需要包括更多

$（文档）.ready（函数（）{
$（'grcsearch'）。on（'keyup'，function（）{
var grcsearch=$（'#grcsearch'）.val（）.toLowerCase（）；
$（'.foodcard'）。每个（函数（）{
var$this=$（this）；
if（$this.text（）.toLowerCase（）.indexOf（grcsearch）=-1）
$this.closest（'.foodcard'）.fadeOut（）；
else$this.closest（'.foodcard'）.fadeIn（）；
})     
});         
});
.wrapper{
文本对齐：居中；
}
.杂货店购物卡{
宽度：85%；
身高：90%；
边界半径：15px；
垫底：20px；
填充顶部：20px；
左侧填充：30px；
右侧填充：30px；
边框宽度：2倍；
边框：实心2px；
边框颜色：rgb（199185201）；
背景色：#D5CAD6；
保证金：自动；
显示：内联块；
盒影：5px 5px 3px灰色；
}
.PCContainer 1{
显示器：flex；
弯曲方向：行；
}
.食品卡{
宽度：15%；
背景色：rgb（236231203）；
利润率：10px；
右边距：10px！重要；
左边距：10px！重要；
边界半径：10px；
显示：内联表；
}

J&K生活辅助
杂货清单
搜索并添加我们下次外出所需的食品


搜寻食品杂货


苹果
香蕉的
橘子
黄油
牛奶
面包
拉面
鸡
碎牛肉
奶酪
您可以隐藏文档准备回调中的所有卡片：

$(document).ready(function(){
   $('.foodcard').hide()
...
}

// For handling clearing search text
$('#grcsearch').change(function () {
    if ($(this).val().trim() == '') {
      $(".foodcard").hide()
    }
})

您可以使用
display:none.foodcard
上的code>，以便在加载页面之前隐藏元素

然后可以在JS文件中使用
.show（）
或
.hide（）
jquery函数来显示/隐藏元素
第一步是测试grcsearch值是否为空字符串。您可以通过以下方式实现这一点：

grcsearch.trim().length == 0

此条件必须处于或与条件同时存在，如果条件：

if(grcsearch.trim().length == 0 || $this.text().toLowerCase().indexOf(grcsearch) === -1)

在keyup事件结束时，您可以在dom就绪时触发事件，只需触发它：

.trigger('keyup');


$（'grcsearch'）。关于（'keyup'，函数（）{
var grcsearch=$（'#grcsearch'）.val（）.toLowerCase（）；
$（'.foodcard'）。每个（函数（）{
var$this=$（this）；
if（grcsearch.trim（）.length==0 | |$this.text（）.toLowerCase（）.indexOf（grcsearch）==-1）
$this.closest（'.foodcard'）.fadeOut（）；
否则{
$this.closest（'.foodcard'）.fadeIn（）；
}
})
}).触发器（“键控”）
.wrapper{
文本对齐：居中；
}
.杂货店购物卡{
宽度：85%；
身高：90%；
边界半径：15px；
垫底：20px；
填充顶部：20px；
左侧填充：30px；
右侧填充：30px；
边框宽度：2倍；
边框：实心2px；
边框颜色：rgb（199185201）；
背景色：#D5CAD6；
保证金：自动；
显示：内联块；
盒影：5px 5px 3px灰色；
}
.PCContainer 1{
显示器：flex；
弯曲方向：行；
}
.食品卡{
宽度：15%；
背景色：rgb（236231203）；
利润率：10px；
右边距：10px！重要；
左边距：10px！重要；
边界半径：10px；
显示：内联表；
}

杂货清单
搜索并添加我们下次外出所需的食品


搜寻食品杂货


苹果
香蕉的
橘子
黄油
牛奶
面包
拉面
鸡
碎牛肉
奶酪
我做了两个更改：

在css中设置初始状态

.foodcard{display: none}

在JS中，为text empty添加一个条件

 grcsearch.trim().length === 0


$（文档）.ready（函数（）{
$（'grcsearch'）。on（'keyup'，function（）{
var grcsearch=$（'#grcsearch'）.val（）.toLowerCase（）；
$（'.foodcard'）。每个（函数（）{
var$this=$（this）；
if（$this.text（）.toLowerCase（）.indexOf（grcsearch）==-1 | | grcsearch.trim（）.length==0）
{
$this.closest（'.foodcard'）.fadeOut（）；}
else$this.closest（'.foodcard'）.fadeIn（）；
})     
});