1

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

$('.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>
1
  • Пожалуйста, приведите пример данных таблицы и верстки, по данному коду - можно мало чего сказать.
    – And
    2 мая 2018 в 12:25

4 ответа 4

1
$('.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'); // включаем все элементы
  }
});
1

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

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

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

1

В данном коде несколько недочетов:

  1. используется переменная color вместо search
  2. несколько раз выбираются все элементы включая вложенный цикл.

Так как в любом случае придется перебрать все элементы с классом category-tr - достаточно воспользоваться одним циклом.

И так как, в основном, методы jQuery нацелены на работу с коллекциями достаточно будет одного вызова .css, который вторым параметром может принимать функцию, результат которой будет присвоен в качестве значения свойства название которого передано в качестве первого параметра

$('.filter').change(function () {
    var search = $(this).val(); // Текстовое поле
    $('.category-tr').css('display', function (i, tr) {
        // если ничего не введено в поиске или значение содержится в `data-option` показываем строку
        if(search == '' || tr.dataset.option.indexOf(search) !== -1) return 'table-row'; 
        // иначе скрываем
        return 'none'
    });
});
0
$('.filter').on('input', function () {
            var search = $(this).val();
            $('.category-tr').each(function (i, opt) {
                if (search !== '') {
                    opt.style.display = 'none';
                    if (opt.dataset.option.indexOf(search) !== -1) {
                        $(this).css('display', 'table-row');
                    }
                } else {
                    $('.category-tr').css('display', 'table-row'); // выключаем все элементы
                }
            });

        });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.