Searching an html table after filtering rows

html5

#1

I have a table which i have filtered rows based on the criteria i have specified in a dropdownlist.
After I have applied the filter i would like to do a text based search. I found some javascript code that does a search but it also searches the rows that i have filtered or hid. I just want to search the rows that were not filtered. I greatly appreciate any help with this. See the below code that i am using for the search.

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

#2

Hi, @kofikelly, I think you forgot to post your code. :slight_smile:


#3

Okay Thanks ! i am new to this forum so let me make that correction.


#4

It might be that you didn’t format the code correctly. To do this, either highlight the code and select the </> icon above the edit area, or place three backticks (`) on the line before your code, and three backticks on the line after your code. On most keyboards, you will find the backtick on the left-hand side of the top row of keys.


#5

Looks like your JS code needs to grab the filtering decisions and integrate it. Did you find anything like that to work with?


#6

Thank You !!! No, I didnt find any examples. I am fairly new using javascript. If you could please offer some guidance on when you mentioned filtering decisions. Could I just include an if statement to chech if the row is hidden then don’t search on it? But I dont know exactly how to implement that into my code. Thanks for your help.


#7

I’m not enough of a JS guru to give any solutions, sorry. Just enough to suggest angles to look for. The JS needs to be aware of the filtering changes. I don’t know how to grab those changes and implement them, sorry.

If you already have a text search, then others may have a better idea of assisting you if you give the code, such as in codepen at https://codepen.io/


#8

Thank You So Much !!!


#9

I dont know how to use code pen. I thought it was a developer forum where you can ask questions


#10

You don’t need to use codepen, only that it can make things easier for those wanting to help by having everything already together in one place.

You can post enough, but not necessarily all, of your

  • HTML code
  • CSS code (if relevant)
  • JavaScript code

here. Others can then copy the code into files to run on their computers to test it. Not as easy for others, so some members may not bother, but if you can’t figure out how to use codepen a minimal “working page” is the next best thing to help others be able to help you.


#11

It looks like you are not learning JS, but putting pieces of Jquery together. This might make the job harder because Jquery is doing the filtering work behind the scenes. (This is from someone who doesn’t use Jquery, so take it with a grain of salt.)


#12

I don’t understand your comment?


#13

Are you using Jquery?


#14

I wonder if an easier way would be to put select radio buttons for each row to designate what rows will be searched. (The dropdown will populate those radio buttons programmatically. In addition, the select buttons can be invisible.) So if the dropdown option selected is “Ford,” then only Ford cars will be selected, and those rows will have the radio button selected.

Then when the search is begun, the JS will only search the rows having radio buttons selected. In this way the JS has a handle on exactly what to search. The script has to know what rows have been selected, and this is one way to do it.


#15

Hi @kofikelly, if the previously filtered rows are also simply hidden, you can select the remaining visible rows with the :visible selector:

$('#myTable tr:visible').filter(/* ... */)

#16

That would be the most elegant solution. Now s/he needs the code to integrate with the script at the top!


#17

What do you mean when you say The dropdown will populate those radio buttons programmatically? Thanks !


#18

So you mean like a multi select list? And then you are saying to put radio buttons beside the rows that have been selected? Thanks !