Как объединить 2 функции изотопного фильтра javascript?

Question

Привет Я успешно установки изотоп фильтрации с несколькими падениями падение с помощью этого JS-код -

jQuery(function() { 
    var $container = $('#isocontent'), 
     $select = $('div#filterGroup select'); 
    filters = {}; 

    $container.isotope({ 
     itemSelector: '.box' 
    }); 
    $select.change(function() { 
     var $this = $(this); 

     var $optionSet = $this; 
     var group = $optionSet.attr('data-filter-group'); 
     filters[group] = $this.find('option:selected').attr('data-filter-value'); 

     var isoFilters = []; 
     for (var prop in filters) { 
      isoFilters.push(filters[prop]) 
     } 
     var selector = isoFilters.join(''); 

     $container.isotope({ 
      filter: selector 
     }); 

     return false; 
    }); 

}); 

И на той же странице, я был в состоянии настроить поле живой поиск ввода с помощью quicksearch.js плагина и изотопов с помощью этот код -

<script type="text/javascript"> 
      $(function() { 
       $('input#id_search').quicksearch('#isocontent.box'); 
}); 
     </script> 
<script type="text/javascript"> 
$(function() { 

    var $container = $('#isocontent'); 


    $container.isotope({ 
     itemSelector: '.box' 
    }); 


    $('input#filter').quicksearch('#isocontent .box', { 
     'show': function() { 
      $(this).addClass('quicksearch-match'); 
     }, 
     'hide': function() { 
      $(this).removeClass('quicksearch-match'); 
     } 
    }).keyup(function(){ 
     setTimeout(function() { 
      $container.isotope({ filter: '.quicksearch-match' }).isotope(); 
     }, 100); 
    }); 

}); 
</script> 

Живой поиск и выпадающие работы, за исключением того, что они не работают вместе. Когда вы выполняете поиск, он будет находить контент, как должен - скрывать нерелевантный контент, - но при фильтрации с помощью выпадающих списков он, кажется, сбрасывает или игнорирует фильтрацию, выполненную в режиме реального поиска. Есть ли прочь, чтобы две функции работали вместе и, возможно, объединили скрипт в один скрипт?

Любая помощь приветствуется, спасибо.

Answer 1

Вот как я это сделал.

Во-первых, я регистрирую простой текстовый фильтр.

Затем в случае нажатия кнопки я «расширяю» этот фильтр, переопределяя его (передавая функцию в параметр фильтра изотопа).

Если кнопка не нажата, я перерегистрирую простой текстовый фильтр.

инициализации Изотоп:

var qsRegex; // global variable 

var $grid = $(container).isotope({ 
    resizable: true, 
    masonry: { 
     columnWidth: columnWidth 
    }, 
    filter: function() { 
     return qsRegex ? $(this).text().match(qsRegex) : true; 
    } 
}); 

Тогда мой KeyUp событие на входе:

var tabPane = $('.tab-pane.active'); 
var $quicksearch = tabPane.find('.quicksearch').unbind().keyup(debounce(function() { 

    qsRegex = new RegExp($quicksearch.val(), 'gi'); 
    $grid.isotope(); 

}, 200)); 

Потом нажмите событие на кнопках: (упрощенный)

Добавление $ (этот) .hasClass (фильтр) - вот что важно здесь.

$('.gender-switch').click(function() { 

    if ($(this).hasClass('active') == false) { 
     var filter = $(this).attr('data-filter'); 
     var my_combined_filter = function() { 
      return qsRegex ? ($(this).text().match(qsRegex) && $(this).hasClass(filter)) : true; 
     } 
     $('.tab-pane.active .gallery').isotope({ filter: my_combined_filter }); 
    } else { 
     // none of the buttons have been selected. 
     // reset to the simple filter 
     $('.tab-pane.active .gallery').isotope({ filter: '*' }); 
     var my_simple_filter = function() { 
      return qsRegex ? $(this).text().match(qsRegex) : true; 
     } 
     $('.tab-pane.active .gallery').isotope({ filter: my_simple_filter }); 
    } 
}); 

Дополнительно: функция дребезга в случае KeyUp

// debounce so filtering doesn't happen every millisecond 
function debounce(fn, threshold) { 
    var timeout; 
    return function debounced() { 
     if (timeout) { 
      clearTimeout(timeout); 
     } 
     function delayed() { 
      fn(); 
      timeout = null; 
     } 
     timeout = setTimeout(delayed, threshold || 100); 
    } 
}