Реализовать поиск по имени

243

03 мая 2018, 08:27

Есть таблица товаров, надо реализовать поиск по имени. Написал функцию, которая естественно не работает. Вот :

$('.filter').change(function () {
            var search = $(this).val(); // Текстовое поле
            $('.category-tr').each(function (e, opt) {
                if (color != '') {
                    $('.category-tr').css('display', 'none'); // выключаем все элементы
                    $('.category-tr[data-option="' + opt.dataset.option.indexOf(color) !== -1 + '"]').css('display', 'table-row'); // включаем нужный
                } else {
                    $('.category-tr').css('display', 'table-row'); // включаем все элементы
                }
            });
        });
<tr class="category-tr" data-option="Жакет" style="display: table-row;"></tr>
<tr class="category-tr" data-option="Кофта" style="display: table-row;"></tr>
<tr class="category-tr" data-option="Джинсы" style="display: table-row;"></tr>

Answer 1

Как я понял, у вас для поля поиска обрабатывается событие 'change'. Оно срабатывает после потери фокуса на поле. Обработайте вместо этого событие 'input':

$('.filter').on('input', function() {
    ...
})

И почему у вас переменная 'search' нигде в коде не используется, а вместо нее используется 'color'?

Answer 2

$('.filter').change(function () {
  var search = $(this).val(); // Текстовое поле
  if (search != '') {
    $('.category-tr').css('display', 'none'); // выключаем все элементы
    $('.category-tr[data-option="' + search + '"]').css('display', 'table-row'); // включаем нужный
  } else {
    $('.category-tr').css('display', 'table-row'); // включаем все элементы
  }
});