JSFiddle - React, Tailwind, and code Playground

by George Shevchenko

HTML

<table id="dataTable">
  <tr class="dataRow">
    <th>Статус</th>
    <th>Имя
      <input type="text" id="filter-input" value="" />
    </th>
  </tr>

  <tr class="dataRow">
    <td>Администратор</td>
    <td>Георгий Шевченко</td>
  </tr>

  <tr class="dataRow">
    <td>Модератор</td>
    <td>XenForo</td>
  </tr>

  <tr class="dataRow">
    <td>Гость</td>
    <td>Вася Пупкин</td>
  </tr>

</table>

CSS

tr:first-child > th {
  font-weight: bold;
}

th,
td {
  border-bottom: 1px solid #ddd;
  padding: 15px;
  text-align: left;
  font-weight: normal;
}

input,
input:active,
input:focus {
  background: whitesmoke;
  border: 1px solid lightgray;
  border-radius: 4px;
  margin-left: 2px;
  outline: none;
}

JavaScript

var filter = $("#filter-input");

function GX(str)
{
  var search = new Array(
  "й","ц","у","к","е","н","г","ш","щ","з","х","ъ",
  "ф","ы","в","а","п","р","о","л","д","ж","э",
  "я","ч","с","м","и","т","ь","б","ю"
  );
  var replace = new Array(
  "q","w","e","r","t","y","u","i","o","p","\\[","\\]",
  "a","s","d","f","g","h","j","k","l",";","'",
  "z","x","c","v","b","n","m",",","\\."
  );

for (var i = 0; i < replace.length; i++) {
    var owe = new RegExp(replace[i], 'mig');
    str = str.replace(owe, function (a) {
        return a == a.toLowerCase() ? search[i] : search[i].toUpperCase();
    })
}
  return str;
}

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

filter.keyup(function(e) {
  var niddle = GX($(this).val());
  $('#dataTable tr:not(:first)').filter(function() {
    if (!$(this).find('td:eq(1)').is(':Contains("' + niddle + '")')) {
      return true;
    } else {
      $(this).show();
      return false;
    }
  }).hide();
});