@sukraman225

JQuery, лайв поиск по элементам со скрытием?

Имеется страница с ul li c именем товара. и input для ввода текста (как поиск), как лучше сделать скрипт, чтобы при вводе мониторить все товары и скрывать li которые не попадают под имя?
  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
$('input').on('input', function(){
  $('li').hide() // скрыть все
  $('li:contains('+this.value+')').show() // показать те, что содержат искомый текст
})


Если нужно искать без учета регистра:
// добавляем в jQ новый селектор
$.expr[":"].containsignorecase = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

и используем его вместо обычного
...
  $('li:containsignorecase('+this.value+')').show() 
  ...


Возмжно, стоит добавить throttle/debounce или при большом количестве товаров и быстром вводе текста будут заметные тормоза. Или хотя-бы немножко оптимизировать - не скрывать все подряд, не искать текст в тех, что уже скрыты, и так далее.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы