Последние записи

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

4th
Ноя

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

Posted by obzor under HTML, JavaScript

Помогите написать фильт для списка элементов.
Нужно чтобы при вводе в 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
Со скриптом у меня проблема — нужна помощь

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>