Хочу сделать фильтр он же поиск элементов на странице (не знаю как правильно это назвать).
Похожий пример того что мне нужно - карта в учебнике этого сайта
https://learn.javascript.ru/?map , где при вводе поискового значения несоответствующие пункты исчезают, а остаются те у которых есть совпадение.
Нужно чтобы при вводе в input из списка скрывались несоответствующие поиску пункты.
HTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Поиск">
<div class="row">
<div class="col-4"><span class="list"><i class="fa fa-home"></i>Солнце</span></div>
<div class="col-4"><span class="list"><i class="fa fa-newspaper-o"></i>Вилка</span></div>
<div class="col-4"><span class="list"><i class="fa fa-home"></i>Кран</span></div>
<div class="col-4"><span class="list"><i class="fa fa-home"></i>Соль</span></div>
<div class="col-4"><span class="list"><i class="fa fa-newspaper-o"></i>Пакет</span></div>
<div class="col-4"><span class="list"><i class="fa fa-tags"></i>Аквариум</span></div>
<div class="col-4"><span class="list"><i class="fa fa-newspaper-o"></i>Велосипед</span></div>
<div class="col-4"><span class="list"><i class="fa fa-home"></i>Крыло</span></div>
<div class="col-4"><span class="list"><i class="fa fa-tags"></i>Кастрюля</span></div>
</div>
Подключена jQuery-3.2.1
Со скриптом у меня проблема, что-то не то делаю - нужна помощь
function myFunction() {
var input, filter, list, li, i, a;
input = $('#myInput');
filter = input.val().toUpperCase();
list = $('.list');
//Массив из list
var li = list.map(function(){
return $(this).text();
}).get();
console.log(li);
for (var i = 0; i < li.length; i++) {
a = li[i];
if(a.val().toUpperCase().index(filter) > -1) {
li[i].show();
} else{
li[i].hide();
}
}
}
