Filtering Table rows using Jquery

Question

I found a Jquery script that does the table filtering stuff based on input field  This script basically takes the filter  splits each word and filters table rows with each word  So at the end you ll have a list of rows that have all the words in the input field   http   www marceble com 2010 02 simple-jquery-table-row-filter   var data   this value split          each data  function i  v        jo   jo filter    contains    v              Now  what I need is that instead of filtering rows that contains each of the words in the input field  I want to filter all the rows that contain at least one of the word in the input field   One way I ve tried is to take each filtered lists into an array       var rows   new Array        each data  function i  v        rows i    jo filter    contains    v               At this stage  I have to make a UNION of all the rows in  rows  array and show them  I m lost on how to do that exactly   Above script in action - http   marceble com 2010 jqueryfilter index html TB iframe true amp width 720 amp height 540  If I type  cat six  in the filter  I want to show three rows

User · Answer

nrodic has an amazing answer  and I just wanted to give a small update to let you know that with a small extra function you can extend the contains methid to be case insenstive      expr      contains     expr createPseudo function arg        return function  elem             return   elem  text   toUpperCase   indexOf arg toUpperCase     gt   0

User · Answer

There s no need to build an array  You can address the DOM directly   Try    rows hide      each data  function i  v       rows filter   contains      v         show          DEMO  EDIT  To discover the qualifying rows without displaying them immediately  then pass them to a function        searchInput   keyup function         var rows       fbody   find  tr   hide        var data   this value split           var  rows         an empty jQuery collection       each data  function i  v             rows add rows filter   contains      v                      myFunction  rows         UPDATED DEMO

User · Answer

Adding one more approach    value     this  val   toLowerCase        product-search-result tr   filter function        this  toggle   this  text   toLowerCase   indexOf value   gt  -1

User · Answer

I chose  nrodic s answer  thanks  by the way   but it has several drawbacks   1  If you have rows containing  cat    dog    mouse    cat dog    cat dog mouse   each on separate row   then when you search explicitly for  cat dog mouse   you ll be displayed  cat    dog    mouse    cat dog    cat dog mouse  rows   2   toLowerCase   was not implemented  that is  when you enter lower case string  rows with matching upper case text will not be showed   So I came up with a fork of  nrodic s code  where    var data   this value    plain text  not an array    and   jo filter function  i  v        var  t     this       var stringsFromRowNodes    t children  td nth-child n         text   toLowerCase        var searchText   data toLowerCase        if  stringsFromRowNodes contains searchText             return true                return false       show the rows that match   show      Here goes the full code  http   jsfiddle net jumasheff 081qyf3s

User · Answer

Have a look at this jsfiddle   The idea is to filter rows with function which will loop through words   jo filter function  i  v        var  t     this       for  var d   0  d  lt  data length    d            if   t is   contains      data d                         return true                      return false       show the rows that match   show      EDIT  Note that case insensitive filtering cannot be achieved using  contains   selector but luckily there s text   function so filter string should be uppercased and condition changed to if   t text   toUpperCase   indexOf data d    gt  -1   Look at this jsfiddle

User · Answer

i have a very simple function   function busca busca           listagem tr not contains    busca        css  display    none            listagem tr contains    busca       css  display

User · Answer

I used Beetroot-Betroot s solution  but instead of using contains  I used containsNC  which makes it case insensitive     extend   expr          containsNC   function elem  i  match  array    return  elem textContent    elem innerText        toLowerCase   indexOf  match 3         toLowerCase     gt   0

User · Answer

tr not  contains      work for me  function busca busca           listagem tr not  contains    busca        css  display    none            listagem tr contains    busca       css  display

User · Answer

based on  CanalDoMestre s answer   I added support for the blank filter case  fixed a typo and prevented hiding the  rows so I can still see the column headers           filterby   on  keyup   function             if  this value length  lt  1                    list tr   css  display                  else                   list tbody tr not  contains    this value        css  display    none                    list tbody tr contains    this value       css  display

[jquery] Filtering Table rows using Jquery

Examples related to jquery