169 похожих чатов

Всем привет , у меня такая задача . Хочу создать

поиск товаров через input . Проблема заключается в том что , у меня выходит вариант который показывает "ничего не найденно" даже если введён правильный элемент или же всё работает но без возможности вывода "ничего не найденно".
Вот код js
let searchItemArray = [{
itemName: 'Смартфон Apple iPhone 11 256GB Dual Sim Yellow (MWNJ2)',
itemCurrentPrice: '29 742',
itenOldPrice: '31 299'
},
{
itemName: 'Смартфон Apple iPhone 11 256GB Dual Sim Yellow (MWNJ2)',
itemCurrentPrice: '29 742',
itenOldPrice: '31 299'
},
{
itemName: 'Смартфон Apple iPhone 11 256GB Dual Sim Yellow (MWNJ2)',
itemCurrentPrice: '29 742',
itenOldPrice: '31 299'
},
{
itemName: 'Смартфон Apple iPhone 11 256GB Dual Sim Yellow (MWNJ2)',
itemCurrentPrice: '29 742',
itenOldPrice: '31 299'
},
{
itemName: 'Часы',
itemCurrentPrice: '29 742',
itenOldPrice: '31 299'
}
]

const searchInput = document.getElementById('searchInput')
const searchSubmenu = document.getElementById('search__submenu')

function createHTML(index) {
const el = document.createElement('div')
el.classList.add('search__item')
el.innerHTML = `
<picture><source srcset="img/iphone-silver.webp" type="image/webp"><img class="search__image" src="img/iphone-silver.png" alt="Alternate Text" /></picture>
<div class="search__information">
<p class="search__maintext">${searchItemArray[index].itemName}</p>
<div class="search__price">
<p class="search__newprice"> ${searchItemArray[index].itemCurrentPrice} <span class="search_span1">грн</span></p>
<p class="search__oldprice"> ${searchItemArray[index].itenOldPrice} <span class="search_span1">грн</span></p>
</div>
</div>
`
searchSubmenu.insertAdjacentElement('afterbegin', el)
}

function showSearchResults() {
const inputValue = searchInput.value.toLocaleLowerCase()
console.log(inputValue)
const itemsNameArray = searchItemArray.map(item => item.itemName.toLocaleLowerCase())
searchSubmenu.innerHTML = ''
console.log(itemsNameArray)
if (inputValue != null) {
itemsNameArray.forEach(function (item, index) {
if (item.includes(inputValue)) {
searchSubmenu.classList.add('visible')
createHTML(index)
}
else{
searchSubmenu.innerHTML = `По запросу ${inputValue} ничего не найденно`
console.log(inputValue,'ничего не найденно')
}
})
}
}

searchInput.addEventListener('change', showSearchResults)

Может кто подсказать где тут в коде ошибка и как сделать так что бы работало для всех варинтов ? Так же для удобства заливаю код на codepen . https://codepen.io/Thgfhhuy/pen/QWpKEaZ . Для теста введите либо "смартфон" либо "часы"

2 ответов

6 просмотров

Проблема в else бранче. Что ты там насоздавал в цикле - если во время итерации итем не имеет вхождений строки поиска - то нагенеренные карточки ты перезатираешь сообщением. Поэтому ниче не рисуется, так как последний итем не имеет вхождений. Попробуй часы вбить в поиск

if (item.includes(inputValue)) { searchSubmenu.classList.add('visible') createHTML(index) } попробуй в этом коде залогировать что-нибудь и ты увидишь, что у тебя код заходит в этот блок, но также он заходит и в else в последней итерации

Похожие вопросы

Обсуждают сегодня

Всем привет, написал код ниже, но он выдает сегфолт, в чем причина? #include <stdio.h> #include <stdlib.h> #include <string.h> struct product { char *name; float price; };...
buzz базз
32
Хотел бы спросить у знающих, правильную ли я выбрал книгу для начала изучения ассемблера Юрова В.И ? Или есть более лучшие книги для начала обучения?
Botsman
25
Книга Юрова В.И пойдёт для обучения?
Botsman
24
$params = [ 'formid' => 'feedbackForm', 'formTpl' => '@CODE: <form class="form-validate" data-id="ajax_form"> <fieldset class="margin-bottom-md"> ...
Pathologic
1
> Примечательно, что новый владелец удаляет из GitHub любые жалобы, указывающие на подозрительную активность или смену владельца, и, видимо, рассчитывает на то, что пользовате...
Alex Sherbakov
1
Hey there Which is the best Linux destro for developers (coding)? To my research on reddit, they said Linux mint is good for mid level spec and Ubuntu for high Lev hardwar...
Wiz 🪄
11
И ещё вопрос: можно ли типа как на дос как-то запариться и с помощью прерываний выводить текст, вместо функции printf ?
НѣкъиⰘижєжєиꙁъвьсєсвѣтьноѣсѣтиѥсть•
34
а мы ещё не созрели до того, чтобы создать отдельный чатик про настройку редакторов?
Cheese Syrowiecki
16
Всем привет! У меня почему-то по-разному отображается TListView в Debug и Release режимах (FireMonkey)! При запуске под Win приложения TListView заливается программо. в Debug ...
Александр COM
8
Ладно, ещё тупого спрошу. Код должен банально вывести значение регистра на консоль, на деле же не выводя ничего, просто оставляя нерабочую консоль (открыта, ничего не написан...
НѣкъиⰘижєжєиꙁъвьсєсвѣтьноѣсѣтиѥсть•
25
Карта сайта