Фильтр слов через инпут
Хочу сделать фильтр он же поиск элементов на странице (не знаю как правильно это назвать).
Похожий пример того что мне нужно - карта в учебнике этого сайта 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, время: 13:56. |