带有选择和搜索字段的jQuery Slick Slider过滤

Question

我正在尝试对此进行修改（蒂姆·罗斯（Tim Ross）https://codepen.io/timrross/details/zRxGMe/）以包括一个按名称过滤的搜索字段，但是该搜索字段仅在选择了类别时才起作用。

我不太擅长jQuery，也不知道我在做什么错。我已经为此苦苦挣扎了3天，因此，我们将不胜感激！

// input field 
function searchbyname() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('slidename');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myslides");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

我在代码笔https://codepen.io/dani_menegatti/pen/OJJeeGp的测试。

Answer 1

您可以使用与change事件中的代码相似的代码。 slick.js的过滤器功能与jQuery.filter的语法相同。

请参见以下示例：

$(document).ready(function() {
  $('.slick').slick({
    slidesToShow: 8,
    slidesToScroll: 8,
    autoplay: true,
    autoplaySpeed: 2000,
    infinite: true,
  });

  // When the filter values are changed, 
  // apply the filter to slick.
  $('form.filter select').on('change', function() {

    var filterClass = getFilterValue();
    $('.filter-class').text(filterClass);
    $('.slick').slick('slickUnfilter');
    $('.slick').slick('slickFilter', filterClass);
  });


  /**
   * This just reads the inputs from the 
   * selects and creates the filter.
   */
  function getFilterValue() {
    // Grab all the values from the filters.
    var values = $('.filter-group').map(function() {
      // For each group, get the select values.
      var groupVal = $(this).find('select').map(function() {
        return $(this).val();
      }).get();
      // join the values together.
      return groupVal.join('');
    }).get();


    // Remove empty strings from the filter array.
    // and join together with a comma. this way you 
    // can use multiple filters.
    return values.filter(function(n) {
      return n !== "";
    }).join(',');
  }


  /**
   * Add a filter group row.
   */
  $('.add-filter').on('click', function(event) {
    event.preventDefault()
    $('form.filter .filter-group').first().clone(true).insertBefore($('form.filter .add-filter'));
  });
});

function searchbyname(ele) {
  // Declare variabl
  const filter = jQuery(ele).val();

  $('.slick').slick('slickUnfilter');
  $('.slick').slick('slickFilter', function() {
    let content = jQuery(this).find("a").text().toLowerCase();
    return content.indexOf(filter) > -1;
  });
}

.green {
  background-color: green;
}

.black {
  background-color: black;
  color: white;
}

.red {
  background-color: red;
}

.white {
  background-color: white;
  color: black;
}


/** Just some styling to make it more readable. */

html {
  margin: 3rem;
}

.filter {
  margin: 1rem 0;
}

.active-filter {
  margin: 1rem 0;
}

.slick {
  width: 1400px;
}

.slick .slide {
  width: 200px;
  height: 100px;
  padding: 1rem;
  border: 1px solid #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

#name {
  background-image: url('/css/searchicon.png');
  /* Add a search icon to input */
  background-position: 10px 12px;
  /* Position the search icon */
  background-repeat: no-repeat;
  /* Do not repeat the icon image */
  width: 100%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}

#myslides {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myslides li a {
  border: 1px solid #ddd;
  /* Add a border to all links */
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  /* Grey background color */
  padding: 12px;
  /* Add some padding */
  text-decoration: none;
  /* Remove default text underline */
  font-size: 18px;
  /* Increase the font-size */
  display: block;
  /* Make it into a block element to fill the whole list */
}

#myslides li a:hover:not(.header) {
  background-color: #eee;
  /* Add a hover effect to all links, except for headers */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<h1>Test - Filter Slick Slider</h1>

<form class="filter">
  <div class="filter-group">
    <select name="color">
      <option value="*">Select a Category</option>
      <option value=".black">Category A</option>
      <option value=".green">Category B</option>
      <option value=".white">Category C</option>
    </select>
  </div>
  <input type="text" id="slidename" onkeyup="searchbyname(this)" placeholder="Search by name" />
</form>



<ul id="myslides" class="slick">
  <li class="slide white"><a href="#">white 1</a></li>
  <li class="slide green"><a href="#">green 1</a></li>
  <li class="slide black"><a href="#">black 1</a></li>
  <li class="slide red"><a href="#">red 1</a></li>
  <li class="slide green"><a href="#">green 2</a></li>
  <li class="slide black"><a href="#">black 2</a></li>
  <li class="slide white"><a href="#">white 2</a></li>
  <li class="slide black"><a href="#">black 3</a></li>
  <li class="slide white"><a href="#">white 3</a></li>
  <li class="slide green"><a href="#">green 3</a></li>
  <li class="slide white"><a href="#">white 4</a></li>
  <li class="slide green"><a href="#">green 4</a></li>
  <li class="slide black"><a href="#">black 4</a></li>
</ul>