Как исправить ошибку в живом поиске?

Question

[Алексей Абакумов]

Всем здраствуйте, есть код живого поиска (писал не я), он нормально работал, но недавно появилась ошибка, не понимаю как исправить и что можно сделать
код:

export async function liveSearch() {
   

    const searchForms = document.querySelectorAll('.search-form');

    searchForms.forEach(searchForm => {
        const searchAll = searchForm.querySelectorAll('.search-form__input');
        const results = searchForm.querySelector('.search-form__result');

        let searchTerm = "";

        async function showList(searchTerm) {
            let searchJSON = await umi_macro('search', 'smart_search', [searchTerm], null, false);
            searchJSON = Object.values(searchJSON)
            if (searchJSON == ['search', 'smart_search']) {
                searchJSON = []
            }
            results.innerHTML = "";
            searchJSON
                .filter((item) => {
                    
                    return (
                        item.name.toLowerCase().includes(searchTerm) ||
                        item.link.toLowerCase().includes(searchTerm) ||
                        item.type.toLowerCase().includes(searchTerm)
                    );
                })
                .forEach((e) => {
                    const li = document.createElement("li");
                    const name = e.name
                    let str = insertMark(name, name.indexOf(searchTerm), [...searchTerm].length)

                    li.innerHTML = `
                    <a class="search-form__link ${e.type === 'category' ? 'red' : ''}" href="${e.link}" title="${name}">${str}</a>`;
                    results.appendChild(li);
                });
            console.log(results)
            results.classList.add("active");
        };


        const inputCheckHandler = debounce(showList, 1500);

        for (let search of [...searchAll]) {
            search.addEventListener('keyup', () => {
                if (typeof search.value  === 'string'){
                searchTerm = search.value.toLowerCase().trim();
                inputCheckHandler(searchTerm);
                }
            });
        }

        function insertMark(searchString, searchPosition, searchLength) {
            let result;
            if (searchPosition === -1) {
                result =
                    `<mark>${searchString.slice(0, searchPosition + searchLength + 1)}</mark>${searchString.slice(searchLength)}`
            } else {
                result =
                    `${searchString.slice(0, searchPosition)}<mark>${searchString.slice(searchPosition, searchPosition + searchLength)}</mark>${searchString.slice(searchPosition + searchLength)}`
            }
            return result;
        }

        document.addEventListener('click', closeSearch)
        function closeSearch(e) {
            let target = e.target;

            if (!target.closest('.header__search-form') && results) {
                results.classList.remove("active");
            }
        }
    })
}

и ошибка:
https://gyazo.com/8753a3ab0495d827f97eef07c5b010e3

при клике на нее консоль выводит следующее:
https://gyazo.com/220194ae821ca67322ef8ac5582780dc

Метод toString() я написал, пытался преобразовать в строку, не помогло, до этого консоль ругалась на toLowerCase()
Прошу помощи, разобраться в этом, спасибо.

Answer 1

[Nikolay Matyushkin]

Выведите это в консоль, нажмите enter и поймёте почему у вас ошибка возникает

может быть и раньше догадаетесь

const item = {
    firstName: 'Donald',
    soname: 'Trump'
}
item.name.toString()

Ответ

Попробуйте это

return (
     (item.name || item.link || item.type)?.toLowerCase().includes(searchTerm)
 );

вместо этого

return (
     item.name.toLowerCase().includes(searchTerm) ||
     item.link.toLowerCase().includes(searchTerm) ||
     item.type.toLowerCase().includes(searchTerm)
);

Comments

[Алексей Абакумов]

Хорошо, я понял, этих ключей не существует, ну а что делать с этим, создавать массив и присваивать ключам значение

[Nikolay Matyushkin]

Алексей Абакумов, я не знаю, что у вас в searchJSON приходит

[Алексей Абакумов]

Nikolay Matyushkin, Николай, спасибо за отклик, но наверное не так сформулировал вопрос, на самом деле сам поиск работает, но не выпадает список с li в котором слова поиска фигурируют.

[Nikolay Matyushkin]

надо смотреть цепочку событий, всё ли в порядке со стилями, короче говоря, как выпадашка реагирует на получение данных с поисковика

[Алексей Абакумов]

Nikolay Matyushkin, Понял, то есть может даже из-за стилей все сломалось?

[Nikolay Matyushkin]

Алексей Абакумов, да, и такое тоже возможно. если приложение в свободном доступе, дайте ссылку, мб на стаджии сёрфинга приложения уже можно будет выявить причину, например

[Алексей Абакумов]

Nikolay Matyushkin, Привет) спасибо за отклик, короче, там проблема была вообще со стороны сервера, на правильные данные отправлял.)