JSFiddle - React, Tailwind, and code Playground

by Tevfik Ceydeliler

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.js"></script>
<div class="input-field col s10 ">
  <i class="material-icons prefix astron-text" style="margin-top:10px">&#xe8b6;</i>
  <input type="text" id="search_ku" placeholder="Filtre">
</div>

<div class="card-action white">
  <table id="ku_list" class="bordered responsive-table">
    <thead>
      <tr>
        <td class="hidden">Entry</td>
        <th data-field="id">Kullanıcı Adı</th>
        <th data-field="id">IP adresi</th>
        <th data-field="mac">Mac Adresi</th>
        <th data-field="session">Bağlantı Başlangıç</th>
        <th data-field="activity">Son İşlem Tarihi</th>
        <th class="noprint" data-field='action'>İşlem</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="hidden">9339c191aa41a53a</td>
        <td>48:5a:3f:1a:29:a5</td>
        <td>192.168.28.125</td>
        <td>48:5a:3f:1a:29:a5</td>
        <td>2016-06-22 16:13:30</td>
        <td>2016-06-22 16:58:48</td>
        <td class=" noprint"><a href="#modalkes" onclick="SetId('9339c191aa41a53a');" class="btn-floating red  modal-trigger"><i class="material-icons">&#xe047;</i></a></td>
      </tr>

      <tr>
        <td class="hidden">6665c97aa2abbfe9</td>
        <td>9c:b7:0d:69:aa:ee</td>
        <td>192.168.25.87</td>
        <td>9c:b7:0d:69:aa:ee</td>
        <td>2016-06-22 10:10:39</td>
        <td>2016-06-22 10:13:34</td>
        <td class=" noprint"><a href="#modalkes" onclick="SetId('6665c97aa2abbfe9');" class="btn-floating red  modal-trigger"><i class="material-icons">&#xe047;</i></a></td>
      </tr>


      <tr>
        <td class="hidden">3b17c787a2f03439</td>
        <td>a0:e4:53:eb:39:ac</td>
        <td>192.168.26.254</td>
        <td>a0:e4:53:eb:39:ac</td>
        <td>2016-06-22 10:00:53</td>
        <td>2016-06-22 14:12:19</td>
        <td class=" noprint"><a...

JavaScript

var $rowsActiveUser = $('#ku_list tr');
$('#search_ku').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
  $rowsActiveUser.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});