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

问题描述

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

我有搜索表单和多个下拉菜单。这是 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;


  }
  

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）