Sorting 同位素过滤器、排序、搜索和Url哈希

我用同位素对一页产品进行分类、过滤和搜索。到现在为止，一直都还不错。 我被困在几个方面。我还没能在网上找到一个例子，上面有我需要的功能的精确组合，所以我需要一些帮助

简而言之，我有多个选择下拉列表过滤产品，选择价格排序顺序和一个快速搜索输入字段。所有的工作，但我有一些需要的补偿

要做：

筛选后搜索不起作用。我需要它和过滤器一起工作

在“价格选择”下拉列表中添加“销售”和“新入”排序

添加URL哈希侦听器以创建用于筛选的链接，即链接到排序第一的新链接

我当前用于筛选和排序的JS：

        $(document).ready(function(){

// quick search regex
var qsRegex;
var filterValue;
// init Isotope
var $grid = $(".grid").isotope({
  itemSelector: ".grid-item",
  layoutMode: "fitRows",
  getSortData: {
    price: '.t-price parseInt',
    category: '[data-category]',
  },
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
    var selectResult = filterValue ? $this.is(filterValue) : true;
    return searchResult  && selectResult;
  }
});

      // bind filter on select change
//$(".filter-select").on("change", function() {
       // get filter value from option value
 // filterValue = $(this).val();
  //console.log(filterValue);
  //$grid.isotope();
//});


// store filter for each group
var filters = {};

$('.filter-select').on( 'change', function( event ) {
  var $select = $( event.target );
  // get group key
  var filterGroup = $select.attr('value-group');
  // set filter for group
  filters[ filterGroup ] = event.target.value;
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}



$('#price-sort').on( 'change', function() {
          var type = $(this).find(':selected').attr('data-sorttype');
          console.log(type);
    var sortValue = this.value;
      if(type=='ass'){$grid.isotope({ sortBy: sortValue , sortAscending: false});}
          else{$grid.isotope({ sortBy: sortValue , sortAscending: true});}
   $grid.isotope({ sortBy: sortValue });
  });


  // change is-checked class on buttons
  $('#price-sort').on( 'change', function() {
    var sortByValue = this.value;
      console.log(sortByValue);
    $grid.isotope({ sortBy: sortByValue});
  });


// 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;
  return function debounced() {
    if (timeout) {
      clearTimeout(timeout);
    }
    function delayed() {
      fn();
      timeout = null;
    }
    setTimeout(delayed, threshold || 100);
  };
}


  });

HTML:

分类
·从低到高
·从高到低
大小
全部的
XS
s
M
L
特大号
XXL

请注意，这是一个由两部分组成的答案。从不同的答案中检查第2部分

答复：第一部分 当我读到你的代码时，你的思路是正确的。由于搜索和筛选在代码中不能一起工作，问题在于，在初始化$grid时，为$grid定义了一个筛选函数。但是，当select过滤器组发生更改时，您可以通过调用$grid.ISOTOX（{filter:filterValue}）重新定义该过滤器。当您使用任何可配置值调用$grid.同位素（）时，$grid将采用这些新配置

因此，你的问题的答案就是有两个变量。一个用于存储筛选值，另一个用于存储搜索值。无论何时调用$grid.同位素（），它都将仅使用这两个值进行过滤

您的代码还有另外几个问题。你不需要做两次价格排序。这只需要做一次。当涉及HTML、类和id时，一个id在一个页面中只能出现一个。这意味着，你不能有两个相同id的分区。如果它是不重要的东西，它可能不会破坏你的页面。但是，在以编程方式操作页面时，这可能会破坏页面。除此之外，您使用过滤器选择的方式是为了从两个按钮组中获取值。但它可以用于你的情况，我想你可能会需要在未来，除了尺寸，可能会有颜色等。。。另外，在比较JS中的字符串进行价格排序时。比较字符串与===的相等性更好。要比较JS中的字符串，可以参考以下内容

对于代码设计，您可以这样做。我认为在document.ready（）中放置所有类似内容的方式将使代码运行得更快

对于应答代码，例程很简单。文档准备就绪后，与搜索字段和选择字段关联的所有事件都将初始化。之后，filterWithHash（）函数与onhashchange事件绑定。然后执行该函数以初始化网格，同时检查URL中是否存在任何关联哈希

对于URL中的哈希，请尝试“filter=”和“search=”。它们可以一起使用，没有任何问题。您还可以将该函数转换为，使其不仅能够接受散列，而且能够接受get参数

代码中还有一些注释可能对您有所帮助

$（文档）.ready（函数（）{
//快速搜索正则表达式
var-qsRegex；
//过滤值
var滤波值；
//网格尚未初始化。
var$网格；
//因为只有一个过滤器组，这就是大小。
//没有必要这样做。
//每次更改所选尺寸时，只需获取所选值。
//然而，这仍然是这样留下的。
$（'.filter select'）。打开（'change'，函数（事件）{
//将筛选值保存在此处。
变量过滤器={}；
var$select=$（event.target）；
//获取组密钥
var filterGroup=$select.attr（'value-group'）；
//为组设置筛选器
过滤器[filterGroup]=event.target.value；
//将筛选值指定给全局筛选值
filterValue=concatValues（过滤器）；
//执行$grid.ISOTOX（）以使用当前全局筛选器值进行更新。
$grid.同位素（）；
});
//通过压缩值展平对象
函数concatValues（obj）{
var值=“”；
用于（obj中的var prop）{
值+=对象[prop]；
}
返回值；
}
//在类按钮上选中更改
//只需要一种价格，不需要两种
$（“#价格排序”）.on（'change'，function（）{
var type=$（this.find（':selected'）.attr（'data-sorttype'）；
//请记住在生产中注销控制台
console.log（类型）；
var sortValue=此值；
if（type=='asc'）$grid.isotophet（{sortBy:sortValue，sortAscending:false}）；
else$grid.同位素（{sortBy:sortValue，sortAscending:true}）；
$grid.同位素（{sortBy:sortValue}）；
});
//使用搜索字段的值进行筛选
var$quicksearch=$（“#quicksearch”）.keyup(
去盎司（函数（）{
qsRegex=newregexp（$quicksearch.val（），“gi”）；
//每次更新qsRegex时，都要更新$grid.ISOTOX（）
//具有全局filterValue和qsRegex的过滤器
$grid.同位素（）；
})
);
//所以过滤不会每毫秒发生一次
    <div id="sort-filter">
        <div id="sort">
                        <select id="price-sort" class="select-css form-control long">
                <option selected disabled class="s-title"> Sort </option>
                <option data-sorttype="dec" value="price">£ Low To High</option>
                <option data-sorttype="ass" value="price">£ High To Low</option>

            </select>

        </div>
        <div class="filters">
                    <select class="filter-select select-css short" value-group="sizes" id="sizes">
                    <option selected disabled class="s-title"> Size </option>
                      <option value="*">All</option>
                      <option value=".XS">XS</option>
                      <option value=".S">S</option>
                      <option value=".M">M</option>
                      <option value=".L">L</option>
                      <option value=".XL">XL</option>
                      <option value=".XXL">XXL</option>
                    </select>
    </div>
    </div>

<div class="container">

    <ul class="grid cs-style-3">
        <div class="grid-sizer"></div>

            <li class="grid-item XS Male Beige Bags Mint">
                <a href="link" class="animsition-link" data-animsition-out-class="fade-out-left-lg">
                    <figure style="background-image: URL(image.jpg);">
                        <img src="/image2.jpg" alt="hat sale item">
                </figure>
                <div id="pro-deets">
                <h3>hat sale item</h3>
                        <span id="price" class="holderpage">
                            £<span class="price t-price">3</span>

                        </span>
                </div></a>
            </li>

            <li class="grid-item L Female Brown Tops Worn">
                <a href="link" class="animsition-link" data-animsition-out-class="fade-out-left-lg">
                    <figure style="background-image: URL(image.jpg);">
                        <img src="/image2.jpg" alt="product no sale no new">
                </figure>
                <div id="pro-deets">
                <h3>product no sale no new</h3>
                        <span id="price" class="holderpage">
                            £<span class="price t-price">40</span>

                        </span>
                </div></a>
            </li>

            <li class="grid-item L Female Brown Tops Worn New" data-category="New">
                <a href="link" class="animsition-link" data-animsition-out-class="fade-out-left-lg">
                    <figure style="background-image: URL(image.jpg);">
                        <img src="/image2.jpg" alt="Skirt">
                </figure>
                <div id="pro-deets">
                <h3>Skirt</h3>
                        <span id="price" class="holderpage">
                            £<span class="price t-price">10</span>

                        </span>
                </div></a>
            </li>

            <li class="grid-item XS Male Beige Bags Mint Sale" data-category="Sale">
                <a href="link" class="animsition-link" data-animsition-out-class="fade-out-left-lg">
                    <figure style="background-image: URL(image.jpg);">
                        <img src="/image2.jpg" alt="Jacket">
                </figure>
                <div id="pro-deets">
                <h3>Jacket</h3>
                        <span id="price" class="holderpage">
                            £<span class="price sale">30</span>
                            <span class="price">£<span class="t-price">20</span></span>
                        </span>
                </div></a>
            </li>

        </ul>
        </div>