Как сделать, чтобы с помощью input можно было производить поиск(в моем случае книг, каждая книга-отдельный объект json в js файле)?

Question

[KEG-lia]

Сейчас например покажу кусок массива:

var CLASS5 = [
     {
        "query": "Царевна-Лягушка",
        "athor": "-",
        "pages": "3-4 листа А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/1.jpg",
    },

    {
        "query": "Журавль и цапля",
        "athor": "-",
        "pages": "2-3 листа А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/2.jpg"
    },

    {
        "query": "Солдатская шинель",
        "athor": "-",
        "pages": "4-6 листа А4",
        "age": "3+",
        "classn": "5 класс",
        "images": "json/images/3.jpg"
    },

Я хочу сделать так, чтобы пользователь вбивал в input название книги, автора книги и т.д. Ему на отдельной странице показывались результаты поиска. А как это в теории организовать. Желательно без бекэнда. Если это никак не будет без него не осуществима, то тоже скажите.

Comments

[szQocks]

https://codepen.io/kapysta-xxl/pen/zYJrZVK?editors=1111

Answer 1

[Михаил Р.]

// get DOM elements
const searchInput = document.getElementById('searchInput');
const resultsContainer = document.getElementById('resultsContainer');

// search from array
function searchBooks(query) {
    return CLASS5.filter(book => {
        return book.query.toLowerCase().includes(query.toLowerCase())
            || book.athor.toLowerCase().includes(query.toLowerCase())
            || book.pages.toLowerCase().includes(query.toLowerCase())
            || book.age.toLowerCase().includes(query.toLowerCase())
            || book.classn.toLowerCase().includes(query.toLowerCase());
    });
}

// print
function displayResults(results) {
    resultsContainer.innerHTML = '';

    if (results.length === 0) {
        resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
        return;
    }

    results.forEach(book => {
        const bookCard = document.createElement('div');
        bookCard.innerHTML = `
            <h2>${book.query}</h2>
            <p>${book.athor}</p>
            <p>${book.pages}</p>
            <p>${book.age}</p>
            <p>${book.classn}</p>
            <img src="${book.images}" alt="Book Image">
        `;
        resultsContainer.appendChild(bookCard);
    });
}

// handler
searchInput.addEventListener('input', (event) => {
    const query = event.target.value;
    const results = searchBooks(query);
    displayResults(results);
});

Comments

[modelair]

конечно не критично, но оптимальней
const q = query.toLowerCase()

[Михаил Р.]

modelair, абсолютно согласен, на скорости не заметил поворот =)

[KEG-lia]

Михаил Р.. спасибо, но почему картинки не отображаются?

[Михаил Р.]

KEG-lia,

спасибо

Можно выразить "зеленой" кнопкой.

но почему картинки не отображаются?

Т.к. итогового кода нет (и ошибок тоже), Вы предлагаете мне угадать? Предположу, в Вашем массиве неправильные пути до изображений.