Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2016, 21:38
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Фильтрация по текстовому полю
Всем привет! Народ, есть сайт: http://handmademania.ru/b2b/ Там я добавил текстовое поле в раздел "Мастер-классы" - поиск по мастер классам. Хочу, чтобы когда пользователь вводил текст, производился бы поиск по селектору .work-name элемента p , т.е. по названиям мастер-классов.

Пока реализовано вот как: поиск работает, но только ищет он по тем элементам, которые в данный момент видны на странице. Например если взять поисковую фразу "Флористика" - отфильтрует правильно, а вот если потом вписать "Candy" - то вообще ни одного элемента не будет найдено, т.к. искать будет только по 2-м из уже найденных. Приходится поисковую строку полностью очищать, и заново вводить "Candy" - чтобы нормально данные фильтровались.

Помогите пожалуйста, как осуществить поиск по всем элементам класса .work-name ?

Исходный код прямо на этой же странице: http://handmademania.ru/b2b/

Пример брал вот отсюда: http://ruseller.com/lessons.php?rub=32&id=1055

В идеале конечно хочу получить результат как вот в этом демо-примере, оттуда же: http://ruseller.com/lessons/les1055/0000113.htm
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2016, 21:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от fenix_63
а вот если потом вписать "Candy" -
как вписать?
Сообщение от fenix_63
то вообще ни одного элемента не будет найдено, т.к. искать будет только по 2-м из уже найденных.
с чего вы взяли что будет искать среди 2 ?
Ответить с цитированием
  #3 (permalink)  
Старый 10.08.2016, 22:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от fenix_63
Исходный код прямо на этой же странице:
где именно?
и нафига стили тегу script?
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2016, 22:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

fenix_63,
трафик огромный у сайта!!!
заменить ваш поиск на код ниже
$(".filterinput").on("input", function() {
    var search = $.trim(this.value).split(/\s+/);
    console.log(search);
    $("#list .work-name").each(function(indx, el) {
        var text = el.textContent.toUpperCase(),
            show = search.some(function(a) {
                return text.indexOf(a.toUpperCase()) >= 0
            });
        $(el).parents(".work")[show ? "slideDown" : "slideUp"]()
    })
});
Ответить с цитированием
  #5 (permalink)  
Старый 10.08.2016, 23:12
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

рони Спасибо большое!!!
Ваш вариант гораздо лучше, трафик большой, вскоре и этой проблемой займусь. Сейчас буду думать как найденые результаты отобразить вверху этого раздела, т.е. если например поисковая фраза "шоу" - чтобы результат отображался у верхнего края раздела, а не на своей исходной позиции, чтобы пользователь видел результат не прокручивая ниже.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Iframe: не получается обратиться к текстовому полю в одном фрейме из другого фрейма goffer2000 Events/DOM/Window 2 19.03.2015 14:08
Событие при клике по полю в Grid demi ExtJS 1 13.07.2013 14:12
Как "прокрутить" страницу к полю? AquaGen Общие вопросы Javascript 3 21.08.2011 08:04
"любой символ" в обращении к полю формы возможно? JeФoks Элементы интерфейса 2 04.08.2011 16:10
Как присвоить текстовому полю исполнение функции? vistecter Элементы интерфейса 2 24.06.2011 20:16