Блог

Главная - Вопросы по программированию - Пользовательский интерфейс не обновляется в результате выборки

Пользовательский интерфейс не обновляется в результате выборки

#javascript #fetch-api

#javascript #fetch-api

Вопрос:

Я пытаюсь загрузить результаты поиска на основе того, что ввел пользователь (адаптивный поиск), я подумал, что это мое событие, поскольку я хотел, чтобы оно было более отзывчивым, например 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);
}

Ответ №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>

Комментарии:

1. спасибо, так что, я думаю, я заметил 2 вещи (возможно, что-то пропустил) 1. вы сделали innerHTML пустым, а затем использовали нижний регистр для сопоставления обоих?

2. да, вы правы, и запрос также выполняется при событии ввода.

3. спасибо. просто интересно. если мы хотим отобразить все элементы по умолчанию n filter при вводе ключа, сделаем ли мы это в том же вызове или это должен быть другой вызов?

4. если вы хотите отображать данные при загрузке страницы по умолчанию, вам нужен другой вызов события загрузки документа. Или вы просто получаете все данные о событии загрузки документа. затем выполните поиск по извлеченным данным. Таким образом, вам не нужно будет совершать вызов каждый раз, когда вы нажимаете клавишу.