搜索无法在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

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

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

Answer 2

首先，您将内联样式与html一起使用，除非使用important，否则它将阻止重写样式。

接着在keyup上从data-name的每一个中获取div，并使用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

使用循环。获取具有类SearchItem.search-results-box-item的所有元素，然后应用循环以查看每个元素的data-name属性是否包括所选的按钮data-name。如果存在，则显示其他隐藏。

$(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>