How to perform a real time search and filter on a HTML table

Question

I ve been Googling and searching Stack Overflow for a while  but I just can t get around this problem   I have a standard HTML table  containing  say  fruit  Like so    lt table gt      lt tr gt         lt td gt Apple lt  td gt         lt td gt Green lt  td gt      lt  tr gt      lt tr gt         lt td gt Grapes lt  td gt         lt td gt Green lt  td gt      lt  tr gt      lt tr gt         lt td gt Orange lt  td gt         lt td gt Orange lt  td gt      lt  tr gt   lt  table gt    Above this I have a text box  which I would like to search the table as a user types  So  if they type Gre for example  the Orange row of the table would disapear  leaving the Apple and Grapes  If they carried on and typed Green Gr the Apple row should disapear  leaving just grapes  I hope this is clear   And  should the user delete some or all of their query from the text box  I should like all of the rows that now match the query to reappear   While I know how to remove a table row in jQuery  I have little idea about how to go about doing the search and removing rows selectively based on this  Is there a simple solution to this  Or a plugin   If anyone could point me in the right direction it would be brilliant   Thank you

User · Answer

Thank you  dfsq for the very helpful code   I ve made some adjustments and maybe some others like them too  I ensured that you can search for multiple words  without having a strict match   Example rows    Apples and Pears Apples and Bananas Apples and Oranges       You could search for  ap pe  and it would recognise the first row You could search for  banana apple  and it would recognise the second row  Demo  http   jsfiddle net JeroenSormani xhpkfwgd 1   var  rows       table tr        search   keyup function       var val     trim   this  val    replace     g       toLowerCase   split           rows hide   filter function         var text     this  text   replace   s  g       toLowerCase        var matchesSearch   true        val  each function index  value          matchesSearch     matchesSearch    false    text indexOf value               return matchesSearch       show

User · Answer

If you can separate html and data  you can use external libraries like datatables or the one i created  https   github com thehitechpanky js-bootstrap-tables  This library uses keyup function to reload tabledata and hence it appears to work like search   function  addTableDataRows paramObjectTDR        let   filterNode  limitNode  bodyNode  countNode  paramObject     paramObjectTDR      let   dataRows  functionArray     paramObject       clearNode bodyNode       if  typeof dataRows      string             bodyNode insertAdjacentHTML  beforeend   dataRows         else           let filterTerm          if  filterNode                filterTerm   filterNode value toLowerCase                      let serialNumber   0          let limitNumber   0          let rowNode          dataRows forEach currentRow   gt                if   filterNode     filterData filterTerm  currentRow                     serialNumber                    if   limitNode    limitNode value      all     limitNode value  gt   serialNumber                        limitNumber                        rowNode    getNode  tr                        bodyNode appendChild rowNode                        addData rowNode  serialNumber  currentRow   td                                                         clearNode countNode           countNode insertAdjacentText  beforeend    Showing 1 to   limitNumber  of   serialNumber  entries              if  functionArray            functionArray forEach currentObject   gt                let   className  eventName  functionName     currentObject               attachFunctionToClassNodes className  eventName  functionName

User · Answer

Here is the best solution for searching inside HTML table while covering all of the table   all td  tr in the table   pure javascript and as short as possible    lt input id  myInput  onkeyup  searchTable    type  text  gt    lt table id  myTable  gt      lt tr gt         lt td gt Apple lt  td gt         lt td gt Green lt  td gt      lt  tr gt      lt tr gt         lt td gt Grapes lt  td gt         lt td gt Green lt  td gt      lt  tr gt      lt tr gt         lt td gt Orange lt  td gt         lt td gt Orange lt  td gt      lt  tr gt   lt  table gt    lt script gt  function searchTable         var input  filter  found  table  tr  td  i  j      input   document getElementById  myInput        filter   input value toUpperCase        table   document getElementById  myTable        tr   table getElementsByTagName  tr        for  i   0  i  lt  tr length  i              td   tr i  getElementsByTagName  td            for  j   0  j  lt  td length  j                  if  td j  innerHTML toUpperCase   indexOf filter   gt  -1                    found   true                                  if  found                tr i  style display                   found   false            else               tr i  style display    none                      lt  script gt

User · Answer

i have an jquery plugin for this  It uses jquery-ui also  You can see an example here http   jsfiddle net tugrulorhan fd8KB 1       searchContainer   gridSearch               primaryAction   search               scrollDuration  0              searchBarAtBottom  false              customScrollHeight  -35              visible                    before  true                  next  true                  filter  true                  unfilter  true                            textVisible                    before  true                  next  true                  filter  true                  unfilter  true                            minCount  2

User · Answer

I created these examples   Simple indexOf search  var  rows       table tr        search   keyup function         var val     trim   this  val    replace     g       toLowerCase          rows show   filter function             var text     this  text   replace   s  g       toLowerCase            return   text indexOf val          hide          Demo  http   jsfiddle net 7BUmG 2   Regular expression search  More advanced functionality using regular expressions will allow you to search words in any order in the row  It will work the same if you type apple green or green apple   var  rows       table tr        search   keyup function          var val            b      trim   this  val    split   s    join    b        b                     reg   RegExp val   i            text        rows show   filter function             text     this  text   replace   s  g                return  reg test text          hide          Demo  http   jsfiddle net dfsq 7BUmG 1133   Debounce  When you implement table filtering with search over multiple rows and columns it is very important that you consider performance and search speed optimisation  Simply saying you should not run search function on every single keystroke  it s not necessary  To prevent filtering to run too often you should debounce it  Above code example will become       search   keyup debounce function         var val     trim   this  val    replace     g       toLowerCase           etc       300      You can pick any debounce implementation  for example from Lodash   debounce  or you can use something very simple like I use in next demos  debounce from here   http   jsfiddle net 7BUmG 6230  and http   jsfiddle net 7BUmG 6231

User · Answer

Datatable JS plugin is also one good alternate to accomedate search feature for html table  var table       example   DataTable         myInput is a  lt input type  text  gt  element     myInput   on   keyup   function          table search  this value   draw           https   datatables net examples basic init zero configuration html

User · Answer

Pure Javascript Solution    Works for ALL columns and Case Insensitive    function search table         Declare variables    var input  filter  table  tr  td  i    input   document getElementById  quot search field input quot      filter   input value toUpperCase      table   document getElementById  quot table id quot      tr   table getElementsByTagName  quot tr quot          Loop through all table rows  and hide those who don t match the search query   for  i   0  i  lt  tr length  i          td   tr i  getElementsByTagName  quot td quot          for j 0   j lt td length   j                let tdata   td j          if  tdata            if  tdata innerHTML toUpperCase   indexOf filter   gt  -1              tr i  style display    quot  quot             break              else             tr i  style display    quot none quot

User · Answer

I found dfsq s answer its comments extremely useful  I made some minor modifications applicable to me  and I m posting it here  in case it is of some use to others    Using class as hooks  instead of table elements tr Searching comparing text within a child class while showing hiding parent Making it more efficient by storing the  rows text elements into an array only once  and avoiding  rows length times computation    x000D   x000D  var  rows       wrapper    var rowsTextArray        var i   0    each  rows  function          rowsTextArray i       this  find   number   text       this  find   fruit   text             replace   s  g               toLowerCase        i             search   keyup function       var val     trim   this  val    replace   s  g      toLowerCase       rows show   filter function index        return  rowsTextArray index  indexOf val      -1        hide        x000D  span     margin-right  0 2em    x000D   lt input type  text  id  search  placeholder  type to search    gt    lt div class  wrapper  gt  lt span class  number  gt one lt  span gt  lt span class  fruit  gt apple lt  span gt  lt  div gt   lt div class  wrapper  gt  lt span class  number  gt two lt  span gt  lt span class  fruit  gt banana lt  span gt  lt  div gt   lt div class  wrapper  gt  lt span class  number  gt three lt  span gt  lt span class  fruit  gt cherry lt  span gt  lt  div gt   lt div class  wrapper  gt  lt span class  number  gt four lt  span gt  lt span class  fruit  gt date lt  span gt  lt  div gt   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

you can use native javascript like this    x000D   x000D   lt script gt  x000D  function myFunction     x000D    var input  filter  table  tr  td  i  x000D    input   document getElementById  myInput    x000D    filter   input value toUpperCase    x000D    table   document getElementById  myTable    x000D    tr   table getElementsByTagName  tr    x000D    for  i   0  i  lt  tr length  i      x000D      td   tr i  getElementsByTagName  td   0   x000D      if  td    x000D        if  td innerHTML toUpperCase   indexOf filter   gt  -1    x000D          tr i  style display       x000D          else   x000D          tr i  style display    none   x000D          x000D               x000D      x000D    x000D   lt  script gt  x000D   x000D   x000D

[javascript] How to perform a real time search and filter on a HTML table

Examples related to javascript

Examples related to jquery

Examples related to html