jQuery/Javascript table filter with select and Input

Question

I've got a Bootstrap table with dynamically loaded data that I have to filter via a dropdown and multiple inputs. I've got the inputs working, but I can't seem to figure out how to make the dropdown play nice with the inputs. When I remove the inputs, I can't seem to get the dropdown to filter. I'm honestly not quite sure what I'm doing wrong, but I've spent so many hours on this and I'm not sure what else to do.

Below is my code:


  
    
                    
                        
                            
                        
                    

                    
                        
                    

                


                
                    
                        
                    

                    
                        
                    

                


                
                    
                        
                    

                


                
                    

                        
                            
                                
                                    Name
                                    Business Name
                                    Address/City
                                    Phone
                                    Email
                                    Association
                                    Web
                                
                            

                            


                                
                                    Ryan
                                    Test
                                    business name
                                    1232 main, Chicago IL
                                    555-555-5555
                                    test@htmltest.com
                                    realtor association name
                                    
                                

                  
                                    test
                                    testington
                                    business company
                                    1232 main, Chicago IL
                                    555-555-5555
                                    test@htmltest.com
                                    business association
                                    
                                

                  
                                    Mister
                                    Testington
                                    company name
                                    1232 main, Chicago IL
                                    555-555-5555
                                    test@htmltest.com
                                    Company Assn
                                    
                                

                  
                                    Ryan
                                    Test
                                    business name
                                    1232 main, Chicago IL
                                    555-555-5555
                                    test@htmltest.com
                                    realtor association name
                                    
                                

                  
                                    Ryan
                                    Test
                                    business name
                                    1232 main, Chicago IL
                                    555-555-5555
                                    test@htmltest.com
                                    realtor association name
                                    
                                

                            
                                 
                                 
                                No Results Found

Below is my JS:

jQuery(document).ready(function(){

$(".search-key").on('change input', function() {

  var emptyFields = $('.search-key').filter(function() {
    return $.trim(this.value) === "";
  });


  if (emptyFields.length == $(".search-key").length) {
    $('table tbody tr').each(function() {
      $(this).show();
    });

    $('#noResult').hide();

  } else {

    var columnNumber = $(this).data('column');


     var enteredValue = $(this).val();


    //var enteredValue = $(this).val();

    $('table tbody tr:visible').each(function() {
      var str = $(this).find('td:eq(' + parseInt(columnNumber) + ')').text();
      var search = str.toLowerCase().indexOf(enteredValue.toLowerCase());

      if (str.toLowerCase().indexOf(enteredValue.toLowerCase()) == -1) {
        $(this).hide();
        $('#noResult').show();
      } else {
        $(this).show();
        $('#noResult').hide();
      }

    });
  }//else
});
});

As I said, the inputs work nicely, but I can't figure out how to get the dropdown to work with them. I've tried passing the value to a string and using indexOf to search it, but that doesn't work.

Any help is super appreciated.

Here is a fiddle I created for this: https://jsfiddle.net/VicePresidentOfAwesome/tcbLqgxp/7/

Anyone with some concept of how I can get this working?

Rick Su · Accepted Answer

The problem is in this line

$('table tbody tr:visible').each(function() {
   // logics here is correct
});

This is how it should work:

For all changed inputs, you need to go through each table row again (no matter it's visible or hidden from the previous search)

Try the following selector

// remove `:visible` selector
$('table tbody tr').each(function() {
   // logics here is correct
});

jQuery/Javascript table filter with select and Input

Answers (1)

Related Questions