Список Js Как получить результаты из нескольких выбранных фильтров - PullRequest
Новая
       22

Список Js Как получить результаты из нескольких выбранных фильтров

0 голосов
/ 28 сентября 2019

Я хочу показать результат из значений, выбранных пользователем, но я получаю результат только из последнего выбранного.Это не вход «выбор».Это больше похоже на фильтр тегов, где на левой стороне у вас есть все доступные теги, и если вы щелкнете / выберете один, он переместится на правую сторону и отсюда вернет весь результат. 


<div class="low-filter">
            <div class="filter-header">
                <h3>Filter by category</h3>
            </div>
            <div class="divider-vertical"></div>
            <div id="categories-filters">
                <div class="low-filter-tags">
                </div>
                <div class="low-filter-search">
                </div>
            </div>
        </div>

Это JS для перемещения метки слева направо 

            let searchValue;
            $('.low-filter-search').on('click', 'label.low-filter-label', function () {
                $(this).find('i').css('color', '');
                $(this).find('i').addClass('fa-times');
                $(this).find('i').removeClass('fa-check');
                $(this).detach().appendTo($('.low-filter-tags'));
                if($('.low-filter-search label.low-filter-label').length < 1){
                    productList.filter()
                }
            });

            $('.low-filter-tags').on('click', 'label.low-filter-label', function () {
                searchValue = $(this).attr('data-content');
                $(this).find('i').css('color', '#8AFF61');
                $(this).find('i').removeClass('fa-times');
                $(this).find('i').addClass('fa-check');
                $(this).detach().appendTo($('.low-filter-search'));

ListJS 

$('.low-filter-tags').on('click', 'label.low-filter-label', (e) => {
    const attrCategory = e.target.getAttribute('data-content');
    productList.filter(function (item) {
        const tableCategory = item.values().category.trim();
        return attrCategory == tableCategory;
    });
});

const filterCategories = function () {
    categories = [];
//    const transformTable = table === null ? ;

    $('table tbody tr').each(function () {
        let tableData = $(this).find('.category');
        if (tableData.length > 0) {
            tableData.each(function () {
                tableCategories.push($(this).text().trim());
            });
        }
    });

    for (i; i < tableCategories.length; i++) {
        if (categories.indexOf(tableCategories[i]) === -1) {
            categories.push(tableCategories[i]);
        }
    }
    categories.sort();
    for (var element in categories) {
        i++;
        myLabel = document.createElement('label');
        myIcon = document.createElement('i');
        myLabel.className = 'low-filter-label';
        myIcon.className = 'fa fa-times';
        myLabel.setAttribute('data-sort', i);
        myLabel.setAttribute('data-content', categories[element]);
        myLabel.appendChild(myIcon);
        $('.low-filter-tags').append(myLabel);
    }

};

Вся информация поступает из Ajax, иЯ думаю, что здесь может быть проблема.

У ListJs действительно есть другие опции (поиск и сортировка).Теперь я хочу, чтобы он работал с тегами 

const options = {
  valueNames: ['name', 'id', 'category', 'brand', 'cost'],
};
let productList = new List('low-turnover', options);
$('.sortListByName').click(() => {
    productList.sort('name', {order: 'asc'});
});

Я пытался с этим примером , но ничего не могу сделать, чтобы он работал.
Также ... Если выесть советы по улучшению этого кода, я буду признателен, я пытаюсь использовать больше функций и объектов для создания более чистого кода.

Заранее спасибо.

...