Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 03.11.2017, 15:57   #1
Анд555
 
Регистрация: 03.11.2017
Сообщений: 9
По умолчанию Фильтр по словам через input

Здравствуйте!
Помогите написать фильт для списка элементов.
Нужно чтобы при вводе в 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();
		}
	}
}
Анд555 вне форума Ответить с цитированием
Старый 03.11.2017, 16:50   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

попробуйте:
Код:
<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 вне форума Ответить с цитированием
Старый 03.11.2017, 18:10   #3
Анд555
 
Регистрация: 03.11.2017
Сообщений: 9
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
попробуйте
Спасибо за помощь! - теперь работает : )
Анд555 вне форума Ответить с цитированием
Старый 03.11.2017, 21:05   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от 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 для этого даже специальный тег создали)
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 03.11.2017, 23:34   #5
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Годно.
Спасибо. Одобрение от профи дорогого стоит.


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


Цитата:
Сообщение от Naive Посмотреть сообщение
2. filtertext определленно будет String, и сравниваешь ты его со стрингом. Лучше делать полное (не)сравнение (!==)
и тут согласен. Я обычно стараюсь строгое сравнение использовать, а тут прокосячил.


Цитата:
Сообщение от Naive Посмотреть сообщение
3. я бы сделал фильтр, а не анти-фильтр: так было бы можно юзеру подсветить что он там ввел и где это нашлось. В HTML5 для этого даже специальный тег создали)
а вот тут я бы хотел примерный код увидеть, если не затруднит, конечно.
Вы имеете в виду, сделать сначала $list.hide();
а потом filter(....).show() ?
и про какой тег HTML5 идёт речь?


p.s. и извините за глупые вопросы. Но я тут стараюсь узнать новое, пытаюсь научиться у профи.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 04.11.2017, 12:28   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

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

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
Спасибо. Одобрение от профи дорогого стоит.
А вот тут я просто офигел. Что меня профием считает мега-старожил форума, с охренеть каким рейтом, автор статей на хабре (куда меня выше песочки не пускали).
Спасибо, очень приятно
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 06.11.2017, 00:09   #7
Анд555
 
Регистрация: 03.11.2017
Сообщений: 9
По умолчанию

У меня конечно по сравнению с вами уровень "ниже плинтуса", но скрипт предложенный в ответе очень даже как нужно работает. Подсветки к нему не нужно, так как он скрывает то что не попадает в поиск, а регистр для сравнения берёт не с первой буквы, а из любых частей.
Это именно то что нужно для меня.
Подсветка мне не подходит, так как в реальности у меня более 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 вне форума Ответить с цитированием
Старый 06.11.2017, 00:11   #8
Анд555
 
Регистрация: 03.11.2017
Сообщений: 9
По умолчанию

А вот что хотел спросить, могу ли я к своему списку как то привязать синонимы, чтобы и они участвовали в получившемся фильтре?
Анд555 вне форума Ответить с цитированием
Старый 07.11.2017, 10:18   #9
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от Анд555 Посмотреть сообщение
могу ли я к своему списку как то привязать синонимы, чтобы и они участвовали в получившемся фильтре?
а это, простите, как?
ну, допустим, набирает пользователь букву "о".
у него остаётся список из
Солнце
Соль
Велосипед
Крыло


Какие ещё синонимы и к чему надо тут показать?
Serge_Bliznykov вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как вызвать input через функцию или if Айрат Р. Помощь студентам 2 09.01.2017 11:40
Фильтр по двум полям через TreeView в ADOTable nagi12-02 C++ Builder 4 09.07.2014 10:53
Расширенный фильтр через макрос tim_oha Microsoft Office Excel 7 23.11.2012 12:15
Фильтр через CheckListBox не конвертирует, не отображает null reihtmonbern БД в Delphi 1 24.05.2012 11:24
Фильтр через DateTimePicker MixanMM БД в Delphi 1 28.07.2010 08:47