Search can't display results by 'data-name' in Jquery

Question

I'm building this search below. I want it to be able to filter the search results by data-name. For example if the user hits XL all div's with data-name = "XL" will be shown. I can see all results but the other buttons are not displaying any results.

The inputfield is working fine. The problem is in the buttons.

here is a link to a fiddle

here is my code

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


    
  

    
    search by size: 
  Search field
      
    
     
          All
      XS
      S
      M
      L
      XL
          2XL
          3XL
        
    
    

  

  
    

        
          flipside
            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.
            M
            XL
            S
            2XL
  


    
    
     
          frontside
            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.
            M
            S
            
  


    
    
     
          leftside
            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.
            S
            XS

user_7035903 · Answer

This way you can iterate on all your data & look for the data-name you want.

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

user_2181397 · Answer

First you are using inline style with html, that will block overriding style unless important is used.

Secondly on keyup get the data-name , from each of the div and use includes to check if it contains the searched term. Also trying to convert the case since x and X will be treated differently

Create a separate function toggleDiDisplay to hide the relevant div since search and button click will do same function. This will prevent code duplication.

You may fine tune the function by and show all div if nothing is matched

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



  

    
      search by size: 
      Search field
      
      
        
          All
          XS
          S
          M
          L
          XL
          2XL
          3XL
        
      
    

  

  
    

      
        flipside
        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.
        M
        XL
        S
        2XL
        


      

      
        frontside
        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.
        M
        S

        


      

      
        frontside
        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.
        3XL

user_4862133 · Answer

Use loop. Get all the elements with class SearchItem.search-results-box-item and apply loop to see whether each elements data-name property include the selected button data-name. If it is present then show else hide.

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



  
    
      search by size: 
      Search field
      
      
        
          All
          XS
          S
          M
          L
          XL
          2XL
          3XL
        
      
    
  

  
    
      
        flipside
        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.
        M
        XL
        S
        2XL
        

      
      
        frontside
        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.
        M
        S
        

      
      
        frontside
        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.
        3XL

Search can't display results by 'data-name' in Jquery

3 Answers