Geek Answers Handbook

Search HTML table with JS and jQuery


I made a table and wanted to make it searchable, so I searched googled and looked here at starckoverflow.

But for some reason, what I found to work should not work for me?

Here is the code, both HTML and JS.


<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="author" content="C.Palma" /> <meta name="content" content="World of Warcraft. Characters. Project. Learn 2 Code." /> <title>World of Warcraft Characters.</title> <link rel="stylesheet" href="css/foundation.css" /> <script src="js/modernizr.js"></script> <script type="text/javascript"> // When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> $(document).ready(function(){ // Write on keyup event of keyword input element $("search").keyup(function(){ // When value of the input is not blank if( $(this).val() != "") { // Show only matching TR, hide rest of them $("#table tbody tr").hide(); $("#table td:contains-ci('" + $(this).val() + "')").parent("tr").show(); } else { // When there is no input or clean again, show everything back $("#table tbody tr").show(); } }); }); // jQuery expression for case-insensitive filter $.extend($.expr[":"], { "contains-ci": function(elem, i, match, array) { return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; } }); </script> </head> <body> <div class="row large-centered"> <h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1> </div> <div class="row large-centered"> <input type="text" id="search" placeholder="Type to search..." /> <table id="table" width="100%"> <thead> <tr> <th>Character name</th> <th>Class</th> <th>Realm</th> </tr> </thead> <tbody> <tr> <td>Benjamin.</td> <td>Rogue.</td> <td>Uldum ES.</td> </tr> <tr> <td>Cachoito.</td> <td>Hunter.</td> <td>Agamaggan EN.</td> </tr> <tr> <td>Contemplario.</td> <td>Paladin.</td> <td>Uldum ES.</td> </tr> <tr> <td>Elthron.</td> <td>Death Knight.</td> <td>Agamaggan ES.</td> </tr> <tr> <td>Giloh.</td> <td>Priest.</td> <td>Agamaggan EN.</td> </tr> <tr> <td>Kitialamok.</td> <td>Warrior.</td> <td>Agamaggan EN.</td> </tr> <tr> <td>Magustroll.</td> <td>Mage.</td> <td>Agamaggan EN.</td> </tr> <tr> <td>Marselus.</td> <td>Mage.</td> <td>Uldum ES.</td> </tr> <tr> <td>Mistrala.</td> <td>Warrior.</td> <td>Uldum ES.</td> </tr> <tr> <td>Suavemente.</td> <td>Warrior.</td> <td>Agamaggan EN.</td> </tr> <tr> <td>Tittus.</td> <td>Monk.</td> <td>Agamaggan EN.</td> </tr> <tr> <td>Yarlokk.</td> <td>Warlock.</td> <td>Uldum ES.</td> </tr> </tbody> </table> </div> <script src="js/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html>
+7
javascript jquery html zurb-foundation
source share
4 answers

I applied part of your code and wrote a working script

http://jsfiddle.net/9hGym/602/

now this is a search query:

  var searchText = $(this).val().toLowerCase(); $.each($("#table tbody tr"), function() { if($(this).text().toLowerCase().indexOf(searchText) === -1) $(this).hide(); else $(this).show(); });

you can also use http://www.datatables.net/ for such things;)

+32
source share

I found that the above solution was subtle in theory (although this did not work), but I found that it works better:

 $('#search-field').on('keyup', function(e) { if ('' != this.value) { var reg = new RegExp(this.value, 'i'); // case-insesitive $('.table tbody').find('tr').each(function() { var $me = $(this); if (!$me.children('td:first').text().match(reg)) { $me.hide(); } else { $me.show(); } }); } else { $('.table tbody').find('tr').show(); } });

If you want to find more than one column, just change:

 if (!$me.children('td:first').text().match(reg)) {

To:

 if (!$me.children('td').text().match(reg)) {
+4
source share

The paved paths were a bit slow for my desk. I came up with another solution that seems much faster.

If you want to search in each cell, you can add an attribute to the cell (I used name-name), for example: <td data-name="john smith">John Smith</td> . Then you can use this javascript code:

 $("#search").keyup(function() { var val = this.value.trim().toLowerCase(); if ('' != val) { var split = val.split(/\s+/); var selector = 'td'; for(var i=0;i<split.length;i++){ selector = selector+'[data-name*='+split[i]+']'; } $('tr').hide(); $(selector).closest('tr').show(); } else { $('tr').show(); } });

If you just want to search for strings for a single attribute, you can simply add the attribute to a string like <tr data-name="john smith"><td>John Smith</td><td>...</td></tr> and use the following:

 $("#search").keyup(function() { var val = this.value.trim().toLowerCase(); if ('' != val) { var split = val.split(/\s+/); var selector = 'tr'; for(var i=0;i<split.length;i++){ selector = selector+'[data-name*='+split[i]+']'; } $('tr').hide(); $(selector).show(); } else { $('tr').show(); } });

Hope this helps!

0
source share

You can use this code. It works great.

 $('#search').keydown(function () { var searchitem = $('#search').val(); if (searchitem == '' || searchitem == null || searchitem == undefined) { $('#table tbody tr').show(); } else { searchitem = searchitem.toUpperCase(); $('#table tbody tr').hide(); $('#table tbody tr').each(function () { if ($(this).text().indexOf(searchitem) > -1) { $(this).show(); } }); } });
-one
source share

More articles:


All Articles