搜索 + 多个过滤器同位素 JQuery

Question

多个过滤器正在工作。我在添加搜索以使用多个过滤器时遇到问题。

我有搜索表单和多个下拉菜单。这是 2 个下拉菜单的形式和示例。

HTML

<input type="text" id="quicksearch" placeholder="Search">

<form action="#">
      <div class="row dropdowns">
        <p class="filter-by">Filter By</p>
        <select name="season" id="filter-season">
          <option value="*">All Seasons</option>
          <option value=".spring">Spring</option><option value=".summer">Summer</option>
        </select>
        <i class="fas fa-plus"></i>
        <select name="season" id="filter-age">
          <option value="*">All Ages</option>
          <option value=".early-years">Early Years</option>
          <option value=".children-youth">Children &amp; Youth</option>
          <option value=".adults-seniors">Adults &amp; Seniors</option>
        </select>        
      </div>...
    </form>

一个程序的示例 - 该程序将携带一堆类名，因此基于类名过滤掉的函数正在工作。我似乎无法获得与搜索和查找匹配文本相关的功能

<li class="carousel-cell program day-mon early-years spring group is-filtered is-selected">
    
        <h3 class="frontpage-card-title">Active Kids: Multi-Sport and ...</h3>

            <span class="program-number">Ages 1 - 3 </span>
        </li>

用于初始化同位素的jQuery代码

<?php /**************************** Filtering Programs ************************************/ ?>
    



  // This is here to allow us to use Isotope without Layoutmode - Do not delete
  Isotope.Item.prototype._create = function() {
  // assign id, used for original-order sorting
    this.id = this.layout.itemGUID++;
    // transition objects
    this._transn = {
      ingProperties: {},
      clean: {},
      onEnd: {}
    };
    this.sortData = {};
  };

  Isotope.Item.prototype.layoutPosition = function() {
    this.emitEvent( 'layout', [ this ] );
  };

  Isotope.prototype.arrange = function( opts ) {
    // set any options pass
    this.option( opts );
    this._getIsInstant();
    // just filter
    this.filteredItems = this._filter( this.items );
    // flag for initalized
    this._isLayoutInited = true;
  };

  // layout mode that does not position items
  Isotope.LayoutMode.create('none');

  // --------------- //

  var filters = [],
      inclusives = [],
      inclusivesString = "",
      filterValue = "",
      filterValueWithInclusivesArray = [],
      filterValueWithInclusives = "",
      $filterSeason = $('#filter-season'),
      $filterAge = $('#filter-age'),
      $noPrograms = $('.no-programs');
      

// quick search regex
var qsRegex;

  // init Isotope
  $noPrograms.hide();

  var $grid = $('.filtered-programs-container').isotope({
    itemSelector: '.program',
    layoutMode: 'none',
    transitionDuration: 0,
    
    filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
    return searchResult;
  },
  });
  
  
  // use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $grid.isotope();
}) );

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  threshold = threshold || 100;
  return function debounced() {
    clearTimeout( timeout );
    var args = arguments;
    var _this = this;
    function delayed() {
      fn.apply( _this, args );
    }
    timeout = setTimeout( delayed, threshold );
  };
}




  $grid.on( 'layoutComplete',
    function( event, laidOutItems ) {
      if (laidOutItems.length <= 0 ) {
        $noPrograms.show();
        $('.filtered-programs-container').hide();
      } else {
        $noPrograms.hide();
        $('.filtered-programs-container').show();
      }
    }
  );

  // bind Filter on season change
  $filterSeason.on( 'change', function () {
    getFilters($grid);
  });

  // Filter Age Range
  $filterAge.on( 'change', function() {
    getFilters($grid);
  });

 

 

  function getFilters($grid) {
    // Display/Reset all hidden list items
    $('.filtered-programs-container li.is-filtered').show();

    // Reset Filters + Inclusives
    filters.splice(0, filters.length);
    inclusives.splice(0, inclusives.length);
    inclusivesString = "";
    filterValue = "";
    filterValueWithInclusivesArray.splice(0, filterValueWithInclusivesArray.length);
    filterValueWithInclusives = "";

    var seasonValue = $filterSeason.val(),
        ageValue = $filterAge.val(),
       
    // Season Filter
    if (seasonValue != "*" ) {
      filters.push(seasonValue);
    }

    // Age Filter
    if (ageValue != "*" ) {
      filters.push(ageValue);
    }

   


    // Grab Inclusive Filters (activity / season / etc)
    filterValue = filters.length ? filters.join('') : '*';

   

   

    $grid.isotope({ filter: filterValueWithInclusives });

    $('.program').removeClass('is-filtered');
    $('.program:visible').addClass('is-filtered');
    $('.number-results').remove();
    var numItems = $('.is-filtered').length/2;
    if ( numItems != 0) {
      $('.filtered-programs-container').append('<div class="number-results"><p>' + numItems + ' Results</p></div>');
    }

    // Hide list items to reset infinite scrolling
    $('.filtered-programs-list-container li.is-filtered').slice(5).hide();
    maxcount = 6;

    //here
    var isFlickity = true;
    if ( isFlickity ) {
      $carousel.flickity('destroy')
      $('.main-carousel').flickity({
        cellSelector: '.carousel-cell.is-filtered',
        cellAlign: 'left',
        contain: true,
        imagesLoaded: true,
        draggable: '>4',
        wrapAround: false,
        pageDots: false,
        percentPosition: true,
        resize: true
      });
    }
    isFlickity = !isFlickity;


  }