Question

所以我已经知道添加了搜索字段的codepen： http://codepen.io/desandro/pen/wfaGu

我一直在尝试使用该代码，并将其集成到我现有的设置中，但没有成功。我真的希望有人可以看看这两个片段，并建议一个有效的组合。

我现有的代码：

jQuery(document).ready(function(){
            jQuery(".flexnav").flexNav({
            });
  // filter functions
  var filterFns = {
  };



  function getHashFilter() {
  // get filter=filterName
  var matches = location.hash.match( /filter=([^&]+)/i );
  var hashFilter = matches && matches[1];
  return hashFilter && decodeURIComponent( hashFilter );
}

jQuery( function() {


    var $grid = jQuery('.wrap');

  // bind filter button click
  var $filterButtonGroup = jQuery('.filter-button-group');
  $filterButtonGroup.on( 'click', 'button', function() {
    var filterAttr = jQuery( this ).attr('data-filter');
    // set filter in hash
    location.hash = 'filter=' + encodeURIComponent( filterAttr );
  });

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
        return;
    }
    isIsotopeInit = true;
    // filter isotope
    $grid.isotope({
        itemSelector: '.isotope-item',
        layoutMode: 'fitRows',

      // use filterFns
      filter: filterFns[ hashFilter ] || hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
        $filterButtonGroup.find('.is-checked').removeClass('is-checked');
        $filterButtonGroup.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
    }
  }

  jQuery(window).on( 'hashchange', onHashchange );

  // trigger event handler to init Isotope
  onHashchange();

});

  });

以及上面代码中提供的搜索代码：

$( function() {
  // quick search regex
  var qsRegex;

  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows',
    filter: function() {
      return qsRegex ? $(this).text().match( qsRegex ) : true;
    }
  });

  // use value of search field to filter
  var $quicksearch = $('.quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope();
  }, 200 ) );

});

// 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 );
  }
}

目前的同位素功能可以在这里看到：http://www.richarderdman.com/sculptures/

如果某人有解决方案 - 我非常感激，我已经工作了近一个星期而没有成功。

Answer 1

改变这个：

var qsRegex;

// init Isotope
var $grid = jQuery('.wrap').isotope({
    itemSelector: '.isotope-item',
    layoutMode: 'fitRows',
  });

  // use value of search field to filter
  var $quicksearch = jQuery('.quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope();
  }, 200 ) );
});

对此：

var qsRegex;

// init Isotope
var $grid = jQuery('.wrap').isotope({
  itemSelector: '.isotope-item',
  layoutMode: 'fitRows',
  filter: function() {
    return qsRegex ? jQuery(this).text().match( qsRegex ) : true;
  }
});

// use value of search field to filter
var $quicksearch = jQuery('.quicksearch').keyup( debounce( function() {
  if(jQuery.quicksearch.val()) {
    qsRegex = new RegExp( jQuery.quicksearch.val(), 'gi' );
    $grid.isotope();
  }
}, 200 ) );

$ grid初始化调用需要设置过滤器值，因为每次在去抖动后重新初始化时都会调用它。我也感觉到有一些jQuery冲突，所以我换掉了＆＃39; $＆＃39;赞成＆jQuery＆＃39;的符号确保兼容性。

将搜索字段应用于jQuery Isotope

1 个答案: