如何在javascript的代码段中添加表过滤器？

嗨，我已经在链接中添加了所有代码，但我不知道如何为名称添加筛选器： 该表是使用javascript中的循环从json对象创建的，我可以在jquery或reactjs中搜索很多关于如何修复它的答案，但我真的想知道如何在javascript中处理这个问题。 让我举一个例子：如果用户输入“F”或“F”，屏幕应该用“F”和“F”过滤所有名称，谢谢各位。下面是代码：

var myContacts=[
{类别：“体育用品”，价格：“$49.99”，库存：真实，名称：“足球”}，
{类别：“体育用品”，价格：“$9.99”，库存：真实，名称：“棒球”}，
{类别：“体育用品”，价格：$29.99，库存：假，名称：“篮球”}，
{类别：“电子产品”，价格：“$99.99”，库存：真实，名称：“iPod Touch”}，
{类别：“电子产品”，价格：“399.99美元”，库存：假，名称：“iPhone 5”}，
{类别：“电子产品”，价格：“$199.99”，库存：真实，名称：“Nexus 7”}
];
函数generateTable（）{
var table=document.createElement（'table'）；
表.style.width='50%'；
table.setAttribute（'cellspacing'，'0'）；
table.setAttribute（'cellpading'，'5'）；
var col=[]；
对于（var i=0；i之类的东西


const myContacts=
[{类别：'体育用品'，价格：$49.99，库存：真实，名称：“足球”}
，{类别：'体育用品'，价格：$9.99，库存：真实，名称：“棒球”}
，{类别：'体育用品'，价格：'$29.99'，库存：假，名称：'篮球'}
，{类别：'Electronics'，价格：'$99.99'，库存：true，名称：'iPod Touch'}
，{类别：'Electronics'，价格：'399.99美元'，库存：假，名称：'iPhone5'}
，{类别：'Electronics'，价格：'$199.99'，库存：true，名称：'Nexus 7'}
] 
常数信息=
{room:document.getElementById（'tableroom'））
，表：空
};
const chkOnlyStock=document.getElementById（'chk-onlyStock'））
，searchBar=document.getElementById（'search-bar'））
;
（function（）//iLife generateTable
{
让eTable=document.createElement（'table'）
myContacts.forEach（联系人=>
{
let row=eTable.insertRow（）
设c_Name=row.insertCell（）
c_Name.textContent=contact.Name
c_Name.className=contact.stocked？“”：“noStock”
row.insertCell（）.textContent=contact.price
})
让rowHead=eTable.createTHead（）.insertRow（）
rowHead.insertCell（）.textContent='Name'
rowHead.insertCell（）.textContent='Price'
信息室附件子项（电子表格）
info.table=info.room.querySelector（'tbody'））
})()
函数rowShow（）
{
让showAll=（searchBar.value=''）
if（//^[a-zA-Z]+$/.test（searchBar.value）| | showAll）//仅接受字符
{
让reg=new RegExp（searchBar.value'ig'）
; 
info.table.querySelectorAll（'tr'）.forEach（行=>
{
让stockOk=！（chkOnlyStock.checked&&row.cells[0].classList.contains（'noStock'））
，letterOK=reg.test（行单元格[0].textContent）
;
reg.lastIndex=0；
row.className=（（letterOK | | showAll）和&stockOk）？“”：“noDisplay”
})
}
else searchBar.value=''//否则重置！
}
chkOnlyStock.onchange=rowShow
searchBar.oninput=rowShow
表格{
边界塌陷：塌陷；
边缘：.5em；
}
泰德{
字体大小：粗体；
背景色：#978aec；
文本对齐：居中；
}
运输署{
填充物：2em.7em；
边框：1px纯黑；
}
td:nth类型（2）{
文本对齐：右对齐；
}
诺斯托克先生{
颜色：红色；
}
.noDisplay{
显示：无；
}



只展示库存产品