应用搜索字段jQuery同位素

Apply search field to jQuery Isotope

本文关键字：同位素 jQuery 字段 搜索 应用      更新时间：2023-09-26

所以我已经意识到添加搜索字段的代码: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/

如果有人有解决这个问题的方法，我会非常感激，我已经研究了将近一个星期了，但没有成功。

修改如下:

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冲突，所以我把'$'符号换成了'jQuery'以确保兼容性。

相关文章：