Live search through table rows

Question

I want to do a live search through the table rows  using jQuery  the  live  word is the key  because I want to type the keywords in the text input  on the same site and I d like jQuery to  automaticaly sort  or remove those who doesn t match the search query  the table rows   Here is my HTML    lt table gt       lt tr gt  lt th gt Unique ID lt  th gt  lt th gt Random ID lt  th gt  lt  tr gt       lt tr gt  lt td gt 214215 lt  td gt  lt td gt 442 lt  td gt  lt  tr gt       lt tr gt  lt td gt 1252512 lt  td gt  lt td gt 556 lt  td gt  lt  tr gt       lt tr gt  lt td gt 2114 lt  td gt  lt td gt 4666 lt  td gt  lt  tr gt       lt tr gt  lt td gt 3245466 lt  td gt  lt td gt 334 lt  td gt  lt  tr gt       lt tr gt  lt td gt 24111 lt  td gt  lt td gt 54364 lt  td gt  lt  tr gt   lt  table gt    And if I would fe  search by the Unique ID  it should show the only rows that starts from the certain number for the Unique ID  Fe  if I would type  2  in the search input box  the following rows should stay  as they begin with 2    lt table gt       lt tr gt  lt th gt Unique ID lt  th gt  lt th gt Random ID lt  th gt  lt  tr gt       lt tr gt  lt td gt 214215 lt  td gt  lt td gt 442 lt  td gt  lt  tr gt       lt tr gt  lt td gt 2114 lt  td gt  lt td gt 4666 lt  td gt  lt  tr gt       lt tr gt  lt td gt 24111 lt  td gt  lt td gt 54364 lt  td gt  lt  tr gt   lt  table gt    If I would type 24  then there should be only one row visible as it begins from the 24    lt table gt       lt tr gt  lt th gt Unique ID lt  th gt  lt th gt Random ID lt  th gt  lt  tr gt       lt tr gt  lt td gt 24111 lt  td gt  lt td gt 54364 lt  td gt  lt  tr gt   lt  table gt    If you guys could give me some tips on how to do something like this I would appreciate it so much   Thank you

User · Answer

Fran  ois Wahl approach  but a bit shorter       search   keyup function         var value   this value          table   find  tr   each function index            if   index  return          var id     this  find  td   first   text              this  toggle id indexOf value      -1                 http   jsfiddle net ARTsinn CgFd9

User · Answer

Here is something you can do with Ajax  PHP and JQuery  Hope this helps or gives you a start  Check the mysql query in php  It matches the pattern starting from first   See live demo and source code here   http   purpledesign in blog to-create-a-live-search-like-google   Create a search box  may be an input field like this    lt input type  text  id  search  autocomplete  off  gt    Now we need listen to whatever the user types on the text area  For this we will use the jquery live   and the keyup event  On every keyup we have a jquery function    search    that will run a php script   Suppose we have the html like this  We have an input field and a list to display the results     lt div class  icon  gt  lt  div gt    lt input type  text  id  search  autocomplete  off  gt    lt ul id  results  gt  lt  ul gt    We have a Jquery script that will listen to the keyup event on the input field and if it is not empty it will invoke the search   function  The search   function will run the php script and display the result on the same page using AJAX   Here is the JQuery     document  ready function               Icon Click Focus        div icon   click function               input search   focus                   Listen for the event        input search   live  keyup   function e           Set Timeout     clearTimeout   data this   timer             Set Search String     var search string     this  val            Do Search     if  search string                     ul results   fadeOut               h4 results-text   fadeOut         else             ul results   fadeIn               h4 results-text   fadeIn              this  data  timer   setTimeout search  100                    Live Search    On Search Submit and Get Results function search         var query value      input search   val           b search-string   html query value       if query value                    ajax               type   POST               url   search st php               data    query  query value                cache  false              success  function html                      ul results   html html                                   return false              In the php  shoot a query to the mysql database  The php will return the results that will be put into the html using AJAX  Here the result is put into a html list   Suppose there is a dummy database containing two tables animals and bird with two similar column names    type    and    desc        search php    Credentials  dbhost    localhost    dbname    live    dbuser    root    dbpass            Connection global  tutorial db    tutorial db   new mysqli     tutorial db- gt connect  dbhost   dbuser   dbpass   dbname    tutorial db- gt set charset  utf8         Check Connection if   tutorial db- gt connect errno        printf  Connect failed   s n    tutorial db- gt connect error       exit      html        html      lt li class  result  gt     html      lt a target   blank  href  urlString  gt     html      lt h3 gt nameString lt  h3 gt     html      lt h4 gt functionString lt  h4 gt     html      lt  a gt     html      lt  li gt      search string   preg replace     A-Za-z0-9            POST  query      search string    tutorial db- gt real escape string  search string       Check Length More Than One Character if  strlen  search string   gt   1  amp  amp   search string                   Build Query      query    SELECT           FROM animals         WHERE type REGEXP      search string            UNION ALL SELECT           FROM birf         WHERE type REGEXP      search string                 result    tutorial db- gt query  query       while  results    result- gt fetch array               result array      results                Check If We Have Results     if  isset  result array             foreach   result array as  result                    Format Output Strings And Hightlight Matches              display function   preg replace      search string   i     lt b class  highlight  gt    search string   lt  b gt     result  desc                  display name   preg replace      search string   i     lt b class  highlight  gt    search string   lt  b gt     result  type              display url    https   www google com search q   urlencode  result  type      amp ie utf-8 amp oe utf-8                   Insert Name              output   str replace  nameString    display name   html                   Insert Description              output   str replace  functionString    display function   output                   Insert URL              output   str replace  urlString    display url   output                     Output             echo  output                  else              Format No Results Output          output   str replace  urlString    javascript void 0      html            output   str replace  nameString     lt b gt No Results Found  lt  b gt     output            output   str replace  functionString    Sorry       output               Output         echo  output

User · Answer

Here is the pure Javascript version of it with LIVE search for ALL COLUMNS     function search table         Declare variables    var input  filter  table  tr  td  i    input   document getElementById  search field input      filter   input value toUpperCase      table   document getElementById  table id      tr   table getElementsByTagName  tr          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  td          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                 break              else             tr i  style display    none

User · Answer

Hey for everyone still looking in 2020  I took some answers from here and made my own searchTable function  function searchTable      var input  filter  table  tr  td  i  txtValue   input   document getElementById  quot myInput quot     filter   input value toUpperCase     table   document getElementById  quot showTable quot     tr   table getElementsByTagName  quot tr quot     th   table getElementsByTagName  quot th quot     var tdarray        var txtValue        for  i   0  i  lt  tr length  i         for   j   0  j  lt  th length  j           tdarray j    tr i  getElementsByTagName  quot td quot   j           if  tdarray         for  var x   0  x  lt  tdarray length  x             if  typeof tdarray x       quot undefined quot               txtValue x    tdarray x  textContent    tdarray x  innerText            if  txtValue x  toUpperCase   indexOf filter   gt  -1                tr i  style display    quot  quot               else               tr i  style display    quot none quot                                            lt input style  quot width  485px  quot  type  quot text quot  id  quot myInput quot   class  quot search-box quot  onkeyup  quot searchTable   quot  placeholder  quot Suche   quot  gt        lt table id  quot showTable quot  gt     lt thead gt       lt tr gt       lt  tr gt     lt  thead gt     lt tbody gt     lt  tbody gt   lt  table gt

User · Answer

Here s a version that searches both columns       search   keyup function          var value   this value toLowerCase   trim            table tr   each function  index            if   index  return            this  find  td   each function                  var id     this  text   toLowerCase   trim                var not found    id indexOf value     -1                 this  closest  tr   toggle  not found               return not found                            demo  http   jsfiddle net rFGWZ 369

User · Answer

I used the previous answers and combine them to create   Search any columns by hide rows and highlighting  Css for highlight found texts   em      background-color  yellow     Js   function removeHighlighting highlightedElements       highlightedElements each function           var element     this         element replaceWith element html              function addHighlighting element  textToHighlight       var text   element text       var highlightedText     lt em gt     textToHighlight     lt  em gt       var newText   text replace textToHighlight  highlightedText       element html newText          search   keyup function        var value   this value toLowerCase   trim        removeHighlighting    table tr em            table tr   each function index          if   index  return          this  find  td   each function              var id     this  text   toLowerCase   trim             var matchedIndex   id indexOf value            if  matchedIndex     0                addHighlighting   this   value                       var not found    matchedIndex    -1              this  closest  tr   toggle  not found            return not found                         Demo here

User · Answer

Here s how I live search a html table   lt input type  text  onkeyup  filterTo this value   myTable    placeholder  Search       lt table id  myTable      lt  table   function filterTo input  table    var tr   document getElementById table  getElementsByTagName  tr    for  var i   1  i  lt  tr length  i          var td   tr i  getElementsByTagName  td        var hide   true      for  var j 0  j lt td length  j               if  td j  innerHTML toUpperCase   indexOf input toUpperCase     gt  -1    hide false  break              tr i  style display   hide    none

User · Answer

search   on  keyup   function             var value     this  val   toLowerCase               tbody tr   filter function                   this  toggle   this  text   toLowerCase   indexOf value   gt  -1                        Assumption there is a one table with a tbody  you can also search with find or if the table has an ID you can use the id

User · Answer

I m not sure how efficient this is but this works     quot  search quot   on  quot keyup quot   function         var value     this  val            quot table tr quot   each function index            if  index    0                  row     this                var id    row find  quot td first quot   text                 if  id indexOf value     0                      this  hide                              else                     this  show                                           DEMO - Live search on table  I did add some simplistic highlighting logic which you or future users might find handy  One of the ways to add some basic highlighting is to wrap em tags around the matched text and using CSS apply a yellow background to the matched text i e   em  background-color  yellow     similar to this     removes highlighting by replacing each em tag within the specified elements with it s content function removeHighlighting highlightedElements       highlightedElements each function            var element     this           element replaceWith element html                  add highlighting by wrapping the matched text into an em tag  replacing the current elements  html value with it function addHighlighting element  textToHighlight       var text   element text        var highlightedText     lt em gt     textToHighlight     lt  em gt        var newText   text replace textToHighlight  highlightedText            element html newText         quot  search quot   on  quot keyup quot   function         var value     this  val                remove all highlighted text passing all em tags     removeHighlighting    quot table tr em quot             quot table tr quot   each function index            if  index     0                 row     this                            var  tdElement    row find  quot td first quot                var id    tdElement text                var matchedIndex   id indexOf value                            if  matchedIndex    0                     row hide                              else                     highlight matching text  passing element and matched text                 addHighlighting  tdElement  value                    row show                                          Demo - applying some simple highlighting

User · Answer

If any cell in a row contains the searched phrase or word  this function shows that row otherwise hides it         lt input type  text  class  search-table   gt           document  on  keyup    search-table   function                      var value     this  val                       table tr   each function  index                         row     this                        row show                        if  index     0  amp  amp  value                            var found   false                           row find  td   each function                                  var cell     this  text                                if  cell indexOf value toLowerCase     gt   0                                    found   true                                  return                                                                                     if  found     true                                 row show                                                      else                                row hide

User · Answer

Below JS function you can use to filter the row based on some specified columns see searchColumn array  It is taken from w3 school and little bit customised to search and filter on the given list of column   HTML Structure   lt input style  float  right  type  text  id  myInput  onkeyup  myFunction    placeholder  Search  title  Type in a name  gt         lt table id   myTable  gt          lt thead class  head  gt           lt tr gt           lt th gt COL 1 lt  th gt           lt th gt CoL 2 lt  th gt           lt th gt COL 3 lt  th gt           lt th gt COL 4 lt  th gt           lt th gt COL 5 lt  th gt           lt th gt COL 6 lt  th gt                 lt  tr gt       lt  thead gt         lt tbody gt        lt tr gt         lt td gt  lt  td gt         lt td gt  lt  td gt         lt td gt  lt  td gt         lt td gt  lt  td gt         lt td gt  lt  td gt         lt td gt  lt  td gt        lt  tr gt        lt  tbody gt   lt  tbody gt         function myFunction         var input  filter  table  tr  td  i      input   document getElementById  myInput        filter   input value toUpperCase        table   document getElementById  myTable        tr   table getElementsByTagName  tr          var searchColumn  0 1 3 4       for  i   0  i  lt  tr length  i             if   tr i   parent   attr  class     head                         continue                  var found   false        for var k 0 k lt searchColumn length k              td   tr i  getElementsByTagName  td   searchColumn k             if  td              if  td innerHTML toUpperCase   indexOf filter   gt  -1                 found true                                       if found  true             tr i  style display                  else          tr i  style display    none

User · Answer

Old question but i find out how to do it faster  For my example  i have about 10k data in my table so i need some fast search machine   Here is what i did      input name  search     on  keyup   function              var input  filter  tr  td  i           input      this           filter   input val   toUpperCase            tr          table tr             for  i   0  i  lt  tr length  i                  td   tr i  getElementsByTagName  td   0       lt -- change number if you want other column to search             if  td                    if  td innerHTML toUpperCase   indexOf filter   gt  -1                        tr i  style display                         else                       tr i  style display    none                                                      Hope it helps somebody

User · Answer

This one is Best in my case  https   www w3schools com jquery jquery filters asp   lt script gt    document  ready function          myInput   on  keyup   function         var value     this  val   toLowerCase            myTable tr   filter function             this  toggle   this  text   toLowerCase   indexOf value   gt  -1                     lt  script gt

User · Answer

Using yckart s answer  I made it to search for the whole table - all td s       search   keyup function         var value   this value          table   find  tr   each function index            if  index     0  return           var if td has   false    boolean value to track if td had the entered key           this  find  td   each function                  if td has   if td has      this  text   indexOf value      -1    Check if td s text matches key and then use OR to check it for all td s                        this  toggle if td has

User · Answer

I took yckart s answer and    spaced it out for readability case insensitive search there was a bug in the comparison that was fixed by adding  trim      If you put your scripts at the bottom of your page below the jQuery include you shouldn t need document ready   jQuery     lt script gt          card-table-search   keyup function             var value   this value toLowerCase   trim                 card-table   find  tr   each function index                var id     this  find  td   first   text   toLowerCase   trim                  this  toggle id indexOf value      -1                         lt  script gt    If you want to extend this have it iterate over each  td  and do this comparison

[jquery] Live search through table rows

Examples related to jquery

Examples related to search

Examples related to live

Examples related to tablerow