Javascript 提取结果未更新UI

我试图根据用户键入的内容加载搜索结果（响应式搜索），我认为这是我的事件，因为我希望它更具响应性，例如

keyup

，但它不起作用。这里有工作 在我的代码中。我已经挣扎了好几个小时了。我做错了什么

function generateHTML(el,toggleClass){
    const div = document.createElement("div");
    const card = div.classList.add("card","col-sm-6", "col-md-6", "col-lg-3", "m-2",toggleClass);
    div.innerHTML = `
        <a href='#' class="products"> 
        <img src="${el.image}" class="card-img-top rounded" alt="${el.title}">
         <div class="card-body">
             <h5 class="card-title">${(slicer(el.title))}</h5>
         </div>
         </a>
    `
    grid.appendChild(div);
}

函数生成器HTML（el，切换类）{
const div=document.createElement（“div”）；
const card=div.classList.add（“card”、“col-sm-6”、“col-md-6”、“col-lg-3”、“m-2”切换类）；
div.innerHTML=`
`
子网格（div）；
}

这应该满足您的实际需求

//获取对元素的引用
const row=document.querySelector（“搜索”）；
const grid=document.querySelector（“网格”）；
document.addEventListener（“DOMContentLoaded”，函数（）{
const div=document.createElement（“div”）；
const formGroup=div.classList.add（“表单组”）；
div.innerHTML=`
搜寻
`;
第2行，附属子行（div）；
//fetchData（）
//获取表单的引用
var输入=“”；
const myInput=document.getElementById（“searchField”）；
myInput.addEventListener（“键控”，函数（e）{
输入=myInput.value；
控制台日志（输入）；
取（'https://fakestoreapi.com/products/')
//将响应转换为JSON
.then（res=>res.json（））
//使用数据筛选是否匹配或显示所有
。然后（数据=>{
grid.innerHTML=''；
data.forEach（el=>{
if（el.title.toLowerCase（）.includes（input.toLowerCase（）））{
console.log（'h'））
generateHTML（el，“块”）
}
})
})
});
//获取输入的引用
//const input=form.searchField.value.trim（）；
//添加一个事件以在键向上时侦听
})
函数generateHTML（el，toggleClass）{
const div=document.createElement（“div”）；
const card=div.classList.add（“card”、“col-sm-6”、“col-md-6”、“col-lg-3”、“m-2”切换类）；
div.innerHTML=`
`;
子网格（div）；
}
函数切片器（str）{
返回str.slice（0,10）；
}

谢谢，所以我想我注意到了两件事（可能遗漏了什么）1。您将innerHTML设置为空，然后使用小写字母将两者匹配？是的，您是对的，并且请求发生在keyup event.thnx上。只是想知道。如果我们想在默认情况下显示所有项目，我们是在同一个调用中进行还是必须在另一个调用中进行？如果您想在默认情况下在页面加载上显示数据，则需要在文档加载事件中进行另一个调用。或者您只需在文档加载事件中获取所有数据。然后对获取的数据执行搜索。因此，您无需在每次按键时拨打电话。