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

Question

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

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

这是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 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>

 

Answer 1

使用循环。获取类SearchItem.search-results-box-item 的所有元素并应用循环以查看每个元素的数据名称属性是否包含选定的按钮数据名称。如果存在，则显示，否则隐藏。

$(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 {
      const size = $(this).data('name');
      $('.SearchItem.search-results-box-item').each((i, ele) => {
        const dataNameArr = $(ele).attr('data-name').split(',').map(e => e.trim());
        const matchedEles = dataNameArr.filter(name => name == size);
        if (matchedEles.length > 0)
          $(ele).show();
        else
          $(ele).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="3XL">
        <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>3XL</p>
        <br>
      </div>
    </div>
  </div>

Answer 2

首先，您在 html 中使用内联样式，这将阻止覆盖样式，除非使用 important。

其次，在 keyup 上，从每个 div 中获取 data-name 并使用 includes 检查它是否包含搜索词。还尝试转换大小写，因为 x 和 X 将被区别对待

创建一个单独的函数toggleDiDisplay 以隐藏相关的div，因为搜索和按钮单击将执行相同的功能。这将防止代码重复。

你可以微调函数，如果没有匹配，则显示所有 div

$(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    toggleDiDisplay(value)

  });

  var btns = $('.filter-button').click(function() {
    var getButtonDataName = $(this).data('name').toLowerCase();
    if (getButtonDataName === 'all') {
      $('#searchFilterDiv div.SearchItem').fadeIn(450);
    } else {

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

});

function toggleDiDisplay(value) {
  console.log(value)
  $("#searchFilterDiv div.SearchItem").each(function(i, v) {

    if (!$(this).data('name').toLowerCase().includes(value)) {
      $(this).addClass('hide')
    }

  })


}

.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: 0.8em;
  line-height: 1.3em;
  text-align: left;
  cursor: pointer;
}

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

.hide {
  display: none !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>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>3XL</p>


        <br>

      </div>



    </div>
  </div>

Answer 3

通过这种方式，您可以迭代所有数据并查找所需的数据名称。

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