Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Фильтр слов через инпут (https://javascript.ru/forum/misc/71237-filtr-slov-cherez-input.html)

MC-XOBAHCK 03.11.2017 16:57

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

Nexus 03.11.2017 17:05

MC-XOBAHCK, у строки есть метод "index"?
М.б. "indexOf"?

PS. и сравнение строк можно было в методе "map" произвести; переменная input избыточна.
PPS. Зачем применять метод "get" в строке 10?

Dilettante_Pro 03.11.2017 17:12

MC-XOBAHCK,
А также
li[i] - это не объект, а текст из объекта,
соответственно, li[i].show(); li[i].hide();
не работают


Часовой пояс GMT +3, время: 13:56.