UI 未被提取结果更新

Question

我正在尝试根据用户键入的内容加载搜索结果（响应式搜索），我认为这是我的事件，因为我希望它更具响应性，例如 keyup 但它没有用。这里正在工作 codepen 并遵循我的代码。我已经挣扎了几个小时。我做错了什么？

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);
}

Answer 1

这应该可以满足您的实际需求

//getting the reference to elements
const row = document.querySelector("#search");
const grid = document.querySelector("#grid");

document.addEventListener("DOMContentLoaded", function () {

    const div = document.createElement("div");
    const formGroup = div.classList.add("form-group");
    div.innerHTML = `        
        <div class="alert alert-primary">
            <label for="searchField">Search</label>
            <input type="text" class="form-control" id="searchField" placeholder="Type in what your looking for">
        </div>
        `;
    row.appendChild(div);

    //fetchData()

    //get the reference to form
    var input = '';
    const myInput = document.getElementById("searchField");
    myInput.addEventListener("keyup", function (e) {
        input = myInput.value;
        console.log(input);
        fetch('https://fakestoreapi.com/products/')
            //convert the response to JSON
            .then(res => res.json())
            //use the data to filter if it matches or display all
            .then(data => {
                grid.innerHTML = '';
                data.forEach(el => {
                    if (el.title.toLowerCase().includes(input.toLowerCase())) {
                        console.log('h')
                        generateHTML(el, "block")
                    }
                })
            })
    });
    //get the reference to input
    //const input = form.searchField.value.trim();
    //add a event to listen on key up
})


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}" width="100" height="auto">
            <div class="card-body">
                <h5 class="card-title">${(slicer(el.title))}</h5>
            </div>
        </a>
        `;
    grid.appendChild(div);
}

function slicer(str) {
    return str.slice(0, 10);
}

<div class="container">
    <div class="" id="search">

    </div>
    <div class="row" id="grid">

    </div>
</div>

UI 未被提取结果更新

UI not being updated by the result of fetch

javascript

fetch-api