Фильтр слов через инпут
Хочу сделать фильтр он же поиск элементов на странице (не знаю как правильно это назвать).
Похожий пример того что мне нужно - карта в учебнике этого сайта 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();
}
}
}
|
MC-XOBAHCK, у строки есть метод "index"?
М.б. "indexOf"? PS. и сравнение строк можно было в методе "map" произвести; переменная input избыточна. PPS. Зачем применять метод "get" в строке 10? |
MC-XOBAHCK,
А также li[i] - это не объект, а текст из объекта, соответственно, li[i].show(); li[i].hide(); не работают |
| Часовой пояс GMT +3, время: 22:14. |