Search a table case insensitive

by Michel Plungjan

HTML

Search content: <input id="search" />
<table class="table table-striped table-bordered table-hover" id="<?php echo $vars['list_id']?>">
    <thead>
        <tr>
            <th class="table-header">
                <input type="checkbox" id="select_all"/>
            </th>
            <th class="table-header">
                <img src="/site/resources/images/outlook.png">
            </th>
            <th class="table-header">
                <i class="fa fa-phone"></i>
            </th>
            <th id="phone_sort" class="table-header"> Telefon  <i class="fa fa-angle-down" style="float: right;"></i>
                <span class="hidden">sort_asc</span>
            </th>
            <th id="company_sort" class="table-header">
                Selvskab <i class="fa fa-angle-down" style="float: right;"></i>
                <span class="hidden">sort_asc</span>
            </th >
            <th id="zip_sort" class="table-header">
                Postnr  <i class="fa fa-angle-down" style="float: right;"></i>
                <span class="hidden">sort_asc</span>
            </th>
            <th id="name_sort" class="table-header">
                Fulde navn  <i class="fa fa-angle-down" style="float: right;"></i>
                <span class="hidden">sort_asc</span>
            </th>
            <th id="email_sort" class="table-header">
                Email  <i class="fa fa-angle-down" style="float: right;"></i>
                <span class="hidden">sort_asc</span>
            </th>
            <th class="table-header">
                <i class="fa fa-ban " style="color:#ff4330"></i>
            </th>
        </tr>
    </thead>
    <tbody id="body">
            <tr class="table_elements" style="cursor: pointer">
                <td>
                    <input type="checkbox" class="" id="xxxx1" />
                </td>
                <td>
                    <img src="/site/resources/images/outlook.png">
                </td>
                <td>
                   ...

JavaScript

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});
$(function() {
    $("#search").on("keyup",function() {
      $("#body tr").hide();
      $("#body tr:containsi('"+this.value+"')").show();
    });
});