时间戳

首页 > 解决方案 > 搜索无法在 Jquery 中按“数据名称”显示结果

javascript - 搜索无法在 Jquery 中按“数据名称”显示结果

问题描述

我正在下面建立这个搜索。我希望它能够过滤搜索结果data-name。例如，如果用户点击 XL，所有带有data-name= "XL" 的 div 都会显示。我可以看到all结果，但其他按钮没有显示任何结果。

inputfield工作正常。问题出在按钮上。

这是一个小提琴的链接

这是我的代码

$(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 otherData = $(this).data('name');
    $('#searchFilterDiv div.SearchItem.search-results-box-item').not(otherData).hide();
  }
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="S, XS">
          <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>S</p>
            <p>XS</p>
            
            
  <br>

    </div>


      
    </div>
  </div>

标签： javascriptjqueryhtmlcsssearch

解决方案

这样，您可以迭代所有数据并查找所需的数据名称。

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

推荐阅读