0

I've created a fixed left column table and want to incorporate a search that will show the specific column not row.

So far, I've only found this which displays the row: How to perform a real time search and filter on a HTML table

But since my headers are in the column, this approach doesn't work very well.

BTW, am pretty much a javascript noob, so bear with me.. :p

Do check out my codepen which shows what I'm trying to do. http://codepen.io/genemiester/pen/qZrpgZ

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();
});

Hope this is clear? Thanks in advance for any help!

Community
  • 1
  • 1
Eugene Goh
  • 3
  • 2

2 Answers2

0

Try this, i hope this is what you were aiming for

var $rows = $('table tbody tr');
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  var regular_expression = new RegExp(escapeRegExp(val));

  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !text.match(regular_expression);
  }).hide();
});

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="search">

<table>
  <tbody>
    <tr>
      <td>google</td>
      <td>Bing</td>
      <td>Search Engine</td>
    </tr>


    <tr>
      <td>Opera</td>
      <td>Chrome</td>
      <td>FireFox</td>
    </tr>
  </tbody>
</table>
WalksAway
  • 2,769
  • 2
  • 20
  • 42
  • Thanks for this, but nope.. not what I'm looking for.. your search is still isolating the row and not the column which is what I need. I want to be able to see the whole column.. not the row as my headers are in the left most fixed column.. if the search only shows a row, the user will only see data for that one header. i want the user to be able to see the whole column so that they can see the rest of the column data for that entity. – Eugene Goh Jul 05 '16 at 06:01
0

Updated Table Filter:
Filter data as show you on in your screenshot.

Just I have changed the in JS Code Table to Div and some did some css changes.
Once check the demo.

$(document).ready(function() {
    $("#clearsearch").click(function() {
        $("#clearsearch").fadeOut(300);
        $("#search").val("");
        $("#contentsearch div span").removeClass('success');
        $("#contentsearch div").removeClass('hide');
    });
    $("#search").keyup(function() {
        var result = $(this).val().replace(/ +?/g, "").toLowerCase();
        if (result != null && result != "") {
            $("#clearsearch").fadeIn(300);
            $("#contentsearch div").addClass('hide');
            $("#contentsearch div").find('span').each(function() {
                var tbresult = $(this).text().replace(/ +?/g, "").toLowerCase();
                if (tbresult.indexOf(result) !== -1) {
                    $(this).closest('div').removeClass('hide');
                    $(this).addClass('success');
                } else {
                    $(this).removeClass('success');
                }
            });
        } else {
            $("#clearsearch").fadeOut(300);
            $("#contentsearch div").removeClass('hide');
            $("#contentsearch div span").removeClass('success');
        }
    });
});
.gap{ height: 10px;}
.hide{dispaly: none;}
#search{ padding-right: 15px;}
.form-group span{ position: relative; left: -24px; top: 3px; cursor: pointer; display: none;}
.form-group span:hover{ color: red;}
.success{
  background-color: #dff0d8;
}
.tableheads, #contentsearch div{
  border: 1px solid #ddd;
 box-shadow: 1px 0px 0px 0px rgba(221,221,221,1);
  float: left;
  display: inline-block;
}
.tableheads span, #contentsearch div span{
  padding: 8px;
  display: block;
  float: none;
  border-bottom: 1px solid #ddd;
}
.tableheads span{
  background-color: #f5f5f5;
}
.no-border-bottom{
  border-bottom: none !important;
}
.no-border-right{
  border-right: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="clearfix gap">
    </div>
    <div class="form-inline">
      <div class="form-group">
        <label>Search :
        </label>
        <input type="text" class="form-control" name="search" id="search" placeholder="Search">
        <span id="clearsearch" class="glyphicon glyphicon-remove">
        </span>
      </div>
    </div>
    <div class="clearfix gap">
    </div>
    <div class="tableheads no-border-right">
      <span>Name
      </span>
      <span>State
      </span>
      <span class="no-border-bottom">Location
      </span>
    </div>
    <div id="contentsearch">
      <div class="no-border-right">
        <span>John
        </span>
        <span>Telangana
        </span>
        <span class="no-border-bottom">Hyderabad
        </span>
      </div>
      <div class="no-border-right">
        <span>Nathaniel
        </span>
        <span>Andhrapradesh
        </span>
        <span class="no-border-bottom">Vijag
        </span>
      </div>
      <div class="no-border-right">
        <span>Charles
        </span>
        <span>Tamilnadu
        </span>
        <span class="no-border-bottom">Chennai
        </span>
      </div>
      <div class="no-border-right">
        <span>Christian
        </span>
        <span>Karnataka
        </span>
        <span class="no-border-bottom">Bangalore
        </span>
      </div>
    </div>
    <div class="clearfix gap">
    </div>
  </div>
</div>

Table - Search Demo:
Previous demo with awesome table search option.

$(document).ready(function() {
    $("#clearsearch").click(function() {
        $("#clearsearch").fadeOut(300);
        $("#search").val("");
        $("#tablecontent tbody tr td").removeClass('success');
        $("#tablecontent tbody tr").removeClass('hide');
    });
    $("#search").keyup(function() {
        var result = $(this).val().replace(/ +?/g, "").toLowerCase();
        if (result != null && result != "") {
            $("#clearsearch").fadeIn(300);
            $("#tablecontent tbody tr").addClass('hide');
            $("#tablecontent tbody tr").find('td').each(function() {
                var tbresult = $(this).text().replace(/ +?/g, "").toLowerCase();
                if (tbresult.indexOf(result) !== -1) {
                    $(this).closest('tr').removeClass('hide');
                    $(this).addClass('success');
                } else {
                    $(this).removeClass('success');
                }
            });
        } else {
            $("#clearsearch").fadeOut(300);
            $("#tablecontent tbody tr").removeClass('hide');
            $("#tablecontent tbody tr td").removeClass('success');
        }
    });
});
.gap{ 
    height: 10px;
}
.hide{ 
      dispaly: none;
}
#search{ 
      padding-right: 15px;
}
.form-group span{ 
      position: relative; 
      left: -24px; 
      top: 3px; 
      cursor: pointer; 
      display: none;
}
.form-group span:hover{ 
      color: red;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="row">
      <div class="clearfix gap"></div>
      <div class="form-inline">
         <div class="form-group">
            <label>Search :</label>
            <input type="text" class="form-control" name="search" id="search" placeholder="Search">
            <span id="clearsearch" class="glyphicon glyphicon-remove"></span>
         </div>
      </div>
      <div class="clearfix gap"></div>
      <table id="tablecontent" class="table table-bordered">
         <thead>
            <tr class="active">
               <th>S.No.</th>
               <th>Name</th>
               <th>Country</th>
               <th>Location</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>1</td>
               <td>John</td>
               <td>India</td>
               <td>Hyderabad</td>
            </tr>
            <tr>
               <td>2</td>
               <td>Nathaniel</td>
               <td>India</td>
               <td>Mumbai</td>
            </tr>
            <tr>
               <td>3</td>
               <td>Charles</td>
               <td>India</td>
               <td>Pune</td>
            </tr>
            <tr>
               <td>4</td>
               <td>Christian</td>
               <td>India</td>
               <td>Secunderabad</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
Sayed Rafeeq
  • 1,219
  • 1
  • 15
  • 28
  • @Eugene Goh, If you are going to use my example as reference, might as well accept it as the answer. Or is there something I did not cover? – Sayed Rafeeq Jul 04 '16 at 10:39
  • Thanks for your suggestion, but nope.. this isn't what I am looking for. Check out this image of what I need to achieve (based on your example) [link](https://www.dropbox.com/s/9hffhffbmdh4npp/example.jpg?dl=0) I actually need to search by column, not by row and to show and isolate the columns containing the keyword i'm searching for. Look at the jpeg and you'll understand. Thanks for your help! – Eugene Goh Jul 05 '16 at 06:16
  • Okay Thank you, @Eugene Goh, I will check it and let you know. – Sayed Rafeeq Jul 05 '16 at 06:25
  • @Eugene Goh, I'm working on the demo, I will update you shortly. :) – Sayed Rafeeq Jul 05 '16 at 18:59
  • 1
    hi sayed, hey this is exactly what i'm looking for, thanks heaps!! – Eugene Goh Jul 08 '16 at 08:19
  • @Eugene Goh, glad to hear that! Good luck! :), If you get solution for your query give to me up-vote to this answer please! – Sayed Rafeeq Jul 08 '16 at 09:05
  • actually do you have your old copy for the table version? Am trying to implement this on my codepen, but it doesn't seem to work: http://codepen.io/genemiester/pen/qZrpgZ – Eugene Goh Jul 10 '16 at 15:47
  • Okay @Eugene Goh, I will check it and let you know. – Sayed Rafeeq Jul 10 '16 at 16:32