Question

我正在下面进行此搜索，text-search和filter by buttons正在工作。我的问题是，如果用户已选择类别，则如何使用input-field筛选所选类别。

我使用了:visible选择器。如果我使用:visible选择器，则搜索不会更新，例如，如果用户点击backspace或输入错误，搜索将不会更新。

我一整天都在努力完成这项工作，但收效不佳。

有人可以帮我吗？这是指向fiddle

的链接

$(document).ready(function(){
  $("#searchInput").on("keyup", function(){
    var value = $(this).val().toLowerCase();
    $("#searchFilterDiv div.SearchItem").filter(function(){
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

var btns = $('.filter-button').click(function(){
  if($(this).data('name') == 'all'){
    $('#searchFilterDiv div.SearchItem').fadeIn(450);
  }else{
     var name = $(this).data('name');
           $('#searchFilterDiv div.SearchItem.search-results-box-item').each(function(i, obj) {
               var names = $(obj).data('name').split(/\s*,\s*/);
               if($.inArray(name,names) === -1)
                   $(obj).hide();
               else
                   $(obj).show();
           });

       }
       btns.removeClass('active');
       $(this).addClass('active');

   })

})

.service-boxes-centered li {
    min-width: 100px;
    padding-top: .8em;
    padding-bottom: .8em;
    padding-left: 1em;
    padding-right: 1em;
    font-size: .9em;
    margin: .3em;
    color: #4b4b4b;
    text-decoration: none;
    flex-grow: 1;
    text-align: center;
}

.service-box-item {
    border: 1px solid #979797;
    font-size: .8em;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.search-results-box-item {
    border: 1px solid lightgrey;
    margin-bottom: 2em;
    padding: 20px;
    font-size: .8em;
    line-height: 1.3em;
    text-align: left;
    cursor: pointer;
  }

.service-box-item.filter-button.active{
  border: red 1px solid !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container form-container">
  <div class="row search-form-item">

    <div class="col-md-12 searchtext-input">
  		<h3>search by size: </h3>
  <label for="searchInput" class="sr-only">Search field</label>
      <input class="form-control" id="searchInput" type="text">
  		<div class="row service-boxes-centered">
  			<ul>
          <li class=" service-box-item filter-button active" data-name="all">All</li>
  				<li class=" service-box-item filter-button" data-name="XS">XS</li>
  				<li class=" service-box-item filter-button" data-name="S">S</li>
  				<li class=" service-box-item filter-button" data-name="M">M</li>
  				<li class=" service-box-item filter-button" data-name="L">L</li>
  				<li class=" service-box-item filter-button" data-name="XL">XL</li>
          <li class=" service-box-item filter-button" data-name="2XL">2XL</li>
          <li class=" service-box-item filter-button" data-name="3XL">3XL</li>
        </ul>
  		</div>
    </div>

  </div>

  <div class="container" id="searchFilterDiv">
    <div class="row">

        <div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, XL, S, 2XL">
          <h3>flipside</h3>
            <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
            <p>M</p>
            <p>XL</p>
            <p>S</p>
            <p>2XL</p>
  <br>

    </div>
    
     <div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, S">
          <h3>frontside</h3>
            <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
            <p>M</p>
            <p>S</p>
            
  <br>

    </div>
    
     <div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="3XL">
          <h3>leftside</h3>
            <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
            <p>3XL</p>
            
            
  <br>

    </div>


      
    </div>
  </div>

Answer 1

您正在搜索:visible选择器

$(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#searchFilterDiv div.SearchItem:visible").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  var btns = $('.filter-button').click(function() {
    if ($(this).data('name') == 'all') {
      $('#searchFilterDiv div.SearchItem').fadeIn(450);
    } else {
      var name = $(this).data('name');
      $('#searchFilterDiv div.SearchItem.search-results-box-item').each(function(i, obj) {
        var names = $(obj).data('name').split(/\s*,\s*/);
        if ($.inArray(name, names) === -1)
          $(obj).hide();
        else
          $(obj).show();
      });

    }
    btns.removeClass('active');
    $(this).addClass('active');

  })

})

.service-boxes-centered li {
  min-width: 100px;
  padding-top: .8em;
  padding-bottom: .8em;
  padding-left: 1em;
  padding-right: 1em;
  font-size: .9em;
  margin: .3em;
  color: #4b4b4b;
  text-decoration: none;
  flex-grow: 1;
  text-align: center;
}

.service-box-item {
  border: 1px solid #979797;
  font-size: .8em;
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.search-results-box-item {
  border: 1px solid lightgrey;
  margin-bottom: 2em;
  padding: 20px;
  font-size: .8em;
  line-height: 1.3em;
  text-align: left;
  cursor: pointer;
}

.service-box-item.filter-button.active {
  border: red 1px solid !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container form-container">
  <div class="row search-form-item">

    <div class="col-md-12 searchtext-input">
      <h3>search by size: </h3>
      <label for="searchInput" class="sr-only">Search field</label>
      <input class="form-control" id="searchInput" type="text">
      <div class="row service-boxes-centered">
        <ul>
          <li class=" service-box-item filter-button active" data-name="all">All</li>
          <li class=" service-box-item filter-button" data-name="XS">XS</li>
          <li class=" service-box-item filter-button" data-name="S">S</li>
          <li class=" service-box-item filter-button" data-name="M">M</li>
          <li class=" service-box-item filter-button" data-name="L">L</li>
          <li class=" service-box-item filter-button" data-name="XL">XL</li>
          <li class=" service-box-item filter-button" data-name="2XL">2XL</li>
          <li class=" service-box-item filter-button" data-name="3XL">3XL</li>
        </ul>
      </div>
    </div>

  </div>

  <div class="container" id="searchFilterDiv">
    <div class="row">

      <div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, XL, S, 2XL">
        <h3>flipside</h3>
        <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
        <p>M</p>
        <p>XL</p>
        <p>S</p>
        <p>2XL</p>
        <br>

      </div>

      <div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="M, S">
        <h3>frontside</h3>
        <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
        <p>M</p>
        <p>S</p>

        <br>

      </div>

      <div class="SearchItem search-results-box-item" style="padding-bottom: 2em; display: block;" data-name="3XL">
        <h3>leftside</h3>
        <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
        <p>3XL</p>


        <br>

      </div>



    </div>
  </div>

更新

完整的演示

$(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#searchFilterDiv div.SearchItem.visible").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  var btns = $('.filter-button').click(function() {
    if ($(this).data('name') == 'all') {
      $('#searchFilterDiv div.SearchItem').addClass('visible').fadeIn(450);
    } else {
      var name = $(this).data('name');
      $('#searchFilterDiv div.SearchItem.search-results-box-item').each(function(i, obj) {
        var names = $(obj).data('name').split(/\s*,\s*/);
        if ($.inArray(name, names) === -1)
          $(obj).removeClass('visible').hide();
        else
          $(obj).addClass('visible').show();
      });

    }
    btns.removeClass('active');
    $(this).addClass('active');

  })

})

.service-boxes-centered li {
  min-width: 100px;
  padding-top: .8em;
  padding-bottom: .8em;
  padding-left: 1em;
  padding-right: 1em;
  font-size: .9em;
  margin: .3em;
  color: #4b4b4b;
  text-decoration: none;
  flex-grow: 1;
  text-align: center;
}

.service-box-item {
  border: 1px solid #979797;
  font-size: .8em;
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.search-results-box-item {
  border: 1px solid lightgrey;
  margin-bottom: 2em;
  padding: 20px;
  font-size: .8em;
  line-height: 1.3em;
  text-align: left;
  cursor: pointer;
}

.service-box-item.filter-button.active {
  border: red 1px solid !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container form-container">
  <div class="row search-form-item">

    <div class="col-md-12 searchtext-input">
      <h3>search by size: </h3>
      <label for="searchInput" class="sr-only">Search field</label>
      <input class="form-control" id="searchInput" type="text">
      <div class="row service-boxes-centered">
        <ul>
          <li class=" service-box-item filter-button active" data-name="all">All</li>
          <li class=" service-box-item filter-button" data-name="XS">XS</li>
          <li class=" service-box-item filter-button" data-name="S">S</li>
          <li class=" service-box-item filter-button" data-name="M">M</li>
          <li class=" service-box-item filter-button" data-name="L">L</li>
          <li class=" service-box-item filter-button" data-name="XL">XL</li>
          <li class=" service-box-item filter-button" data-name="2XL">2XL</li>
          <li class=" service-box-item filter-button" data-name="3XL">3XL</li>
        </ul>
      </div>
    </div>

  </div>

  <div class="container" id="searchFilterDiv">
    <div class="row">

      <div class="SearchItem search-results-box-item visible" style="padding-bottom: 2em; display: block;" data-name="M, XL, S, 2XL">
        <h3>flipside</h3>
        <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
        <p>M</p>
        <p>XL</p>
        <p>S</p>
        <p>2XL</p>
        <br>

      </div>

      <div class="SearchItem search-results-box-item visible" style="padding-bottom: 2em; display: block;" data-name="M, S">
        <h3>frontside</h3>
        <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
        <p>M</p>
        <p>S</p>

        <br>

      </div>

      <div class="SearchItem search-results-box-item visible" style="padding-bottom: 2em; display: block;" data-name="3XL">
        <h3>leftside</h3>
        <p>Vivamus viverra libero sed mi vehicula euismod. Nullam mauris dolor, hendrerit non lorem nec, vehicula dapibus nisl. In posuere est lectus, consequat tempus velit laoreet ut.</p>
        <p>3XL</p>


        <br>

      </div>



    </div>
  </div>

使用jQuery过滤选定的类别

1 个答案: