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 ответов

4 просмотра

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

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

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

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

@Aiwan что такое база образца?
Alexey
27
Не многие знают, а кто знает, тот уже успел забыть, что в далёком 2004 году эта игра произвела настоящий фурор, настолько революционной была технология, применяемая для её соз...
ICCID
4
Хотя у меня сейчас есть более сложная задача, вот её думаю: как объяснить челу переходного возраста противоположного полу, обучающегося в польском колледже (а-ля наш техникум)...
Вячеслав Кузьменко
15
коллеги, добрый вечер! А никто не знает как модальная форма может себя закрыть? Ну допустим модальная форма определила, что смысла ей работать нет и хочет вернуть modalResult...
Михаил
83
Добрый день Хочу начать обучение языку, не являюсь представителем it, буду благодарна за помощь, совсем пока не понимаю ничего) Подскажите, пожалуйста, где можно начать первы...
Sara Lala
30
верно что я могу удалить эти addq и subq т.к. со стеком никакого взаимодействия нет (исключая call)?
Michael
16
Hi Everyone! To all Are you Looking for Interview Support at the Lowest Price? Look no further! Then contact us We offer Interview Support for a low cost variety of technol...
Rambabu Nallamilli
3
средствами IBX как-то можно выполнить запрос insert ... returning?
Igor
31
всем привет. подскажите: вот по русски называется "прошивка для контроллера". или "бинарь" могут сказать. или "дамп". А как по английски это называется? Я хочу попытаться по...
Павлик Ливаткин
4
А если изначально бот работал так : есть сайт онлайн школы. У каждого ученика свой кабинет. Где он авторизуется по своим данным. И уже в кабинете, на самом сайте делает оплату...
Денис 💡 Фрилансер
13
Карта сайта