Добрый день.
На известном ресурсе посмотрел урок по реализации подсветки списка, исходя из написанного в строке поиска. В уроке не затрагивалась тема создания регистронезависимого поиска, поэтому я попробовал улучшить код, применив toLowerCase() к значению инпута и строке в списке. Результата не дало, мало того, стали всплывать ошибки, например список обновлялся в виде задублированных слов. Посмотрите пожалуйста, где ошибка.
Заранее спасибо.
const input = document.querySelector('.form-control');
const smartSearch = function () {
const val = this.value.toLowerCase().trim();
const list = document.querySelectorAll('.item li');
console.log(val)
if (val != '') {
list.forEach((item) => {
const lowerText = item.innerText.toLowerCase();
if (lowerText.search(val) == -1) {
item.classList.add('hide')
item.innerHTML = item.innerText;
} else {
item.classList.remove('hide')
let str = item.innerText;
item.innerHTML = markText(str, item.innerText.search(val), val.length)
}
})
} else {
list.forEach(function (item) {
item.classList.remove('hide')
item.innerHTML = item.innerText;
})
}
}
const markText = (str, pos, len) => {
return str.slice(0, pos) + '<mark>' + str.slice(pos, pos + len) + '</mark>' + str.slice(pos + len);
}
input.addEventListener('input', smartSearch);
