Фильтр по словам через input

[Анд555]

Здравствуйте!
Помогите написать фильт для списка элементов.
Нужно чтобы при вводе в 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-wrench"></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();
		}
	}
}

[Serge_Bliznykov]

попробуйте:

<script>
function myFunction() {
	var filtertext = $('#myInput').val().toUpperCase();
	var $list = $('.list');

        $list.show();  
        if (filtertext != ''){
           $list.filter( function( index ) {
		return $(this).text().toUpperCase().indexOf(filtertext) === -1 ;
	   }).hide();
        }
}
</script>

[Анд555]

Сообщение от Serge_Bliznykov

попробуйте

Спасибо за помощь! - теперь работает : )

[Naive]

Сообщение от Serge_Bliznykov

попробуйте:

<script>
function myFunction() {
	var filtertext = $('#myInput').val().toUpperCase();
	var $list = $('.list');

        $list.show();  
        if (filtertext != ''){
           $list.filter( function( index ) {
		return $(this).text().toUpperCase().indexOf(filtertext) === -1 ;
	   }).hide();
        }
}
</script>

Вы должны добавить отзыв кому-то ещё, прежде чем сможете снова добавить его Serge_Bliznykov.

Годно.
1. Только было бы проще из функции получить контекст this, без обращения к определенно "неизвестному" айди.
2. filtertext определленно будет String, и сравниваешь ты его со стрингом. Лучше делать полное (не)сравнение (!==)
3. я бы сделал фильтр, а не анти-фильтр: так было бы можно юзеру подсветить что он там ввел и где это нашлось. В HTML5 для этого даже специальный тег создали)

[Serge_Bliznykov]

Сообщение от Naive

Годно.

Спасибо. Одобрение от профи дорогого стоит.

Сообщение от Naive

1. Только было бы проще из функции получить контекст this, без обращения к определенно "неизвестному" айди.

согласен. это и логичнее и универсальнее и проще.

Сообщение от Naive

2. filtertext определленно будет String, и сравниваешь ты его со стрингом. Лучше делать полное (не)сравнение (!==)

и тут согласен. Я обычно стараюсь строгое сравнение использовать, а тут прокосячил.

Сообщение от Naive

3. я бы сделал фильтр, а не анти-фильтр: так было бы можно юзеру подсветить что он там ввел и где это нашлось. В HTML5 для этого даже специальный тег создали)

а вот тут я бы хотел примерный код увидеть, если не затруднит, конечно.
Вы имеете в виду, сделать сначала $list.hide();
а потом filter(....).show() ?
и про какой тег HTML5 идёт речь?


p.s. и извините за глупые вопросы. Но я тут стараюсь узнать новое, пытаюсь научиться у профи.

[Naive]

Сообщение от Serge_Bliznykov

а вот тут я бы хотел примерный код увидеть, если не затруднит, конечно.

Пьян для такого, но в общих словах постараюсь объяснить: делаем не фильтр, а редьюз, где найденное обрамляем в <mark/>, а не найденное помечаем как не найденное (в jQ-коллекцию, для быстроты работы). Для марка, естественно нужно свои стили прописать.

Сообщение от Serge_Bliznykov

Спасибо. Одобрение от профи дорогого стоит.

А вот тут я просто офигел. Что меня профием считает мега-старожил форума, с охренеть каким рейтом, автор статей на хабре (куда меня выше песочки не пускали).
Спасибо, очень приятно

[Анд555]

У меня конечно по сравнению с вами уровень "ниже плинтуса", но скрипт предложенный в ответе очень даже как нужно работает. Подсветки к нему не нужно, так как он скрывает то что не попадает в поиск, а регистр для сравнения берёт не с первой буквы, а из любых частей.
Это именно то что нужно для меня.
Подсветка мне не подходит, так как в реальности у меня более 100 пунктов и будет ещё прибавляться.
Я только html переделал немного убрав span

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Поиск">
<div class="row">
	<div class="col-4 list"><i class="fa fa-home"></i>Солнце</div>
	<div class="col-4 list"><i class="fa fa-newspaper-o"></i>Вилка</div>
	<div class="col-4 list"><i class="fa fa-home"></i>Кран</div>
	<div class="col-4 list"><i class="fa fa-home"></i>Соль</div>
	<div class="col-4 list"><i class="fa fa-newspaper-o"></i>Вуйка</div>
	<div class="col-4 list"><i class="fa fa-tags"></i>Аквариум</div>
	<div class="col-4 list"><i class="fa fa-newspaper-o"></i>Велосипед</div>
	<div class="col-4 list"><i class="fa fa-home"></i>Крыло</div>
	<div class="col-4 list"><i class="fa fa-wrench"></i>Кастрюля</div>
</div>

Единственное что я ещё думал - реализовать подсказки, но запутался и пока от этой идеи отказался.

[Анд555]

А вот что хотел спросить, могу ли я к своему списку как то привязать синонимы, чтобы и они участвовали в получившемся фильтре?

[Serge_Bliznykov]

Сообщение от Анд555

могу ли я к своему списку как то привязать синонимы, чтобы и они участвовали в получившемся фильтре?

а это, простите, как?
ну, допустим, набирает пользователь букву "о".
у него остаётся список из
Солнце
Соль
Велосипед
Крыло

Какие ещё синонимы и к чему надо тут показать?