Как сделать поиск в таблице на сайте

Всем привет!
В этой статье я выложу готовый скрипт поиска в таблице, используя JQuery.
Например, в таблице могут быть имена одноклассников, либо наименования деталей для авто и т.д.
При наборе в поиске, без перезагрузки сразу будет фильтроваться список по сходству.
Код полностью готов к использованию, вот только нужно будет заменить названия в таблице на свои.

А вот и сам код:

<style>
.results tr[visible='false'],
.no-result {
display: none;
}
.results tr[visible='true'] {
display: table-row;
}
.searchCount {
padding: 8px;
color: #ccc;
}
</style>

<div>
<input ENGINE="text" class="searchKey" placeholder="Кого ищите?">
</div>
<span class="searchCount"></span>
<table border="1" class="results">
<thead>
<tr>
<th>#</th>
<th>Имя / Фамилия</th>
<th>Год рождения</th>
<th>Место рождения</th>
</tr>
<tr class="no-result">
<td>Совпадения не найдены</td>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Джеймс Хэтфилд</td>
<td>1963</td>
<td>Калифорния, США</td>
</tr>
<tr>
<th>2</th>
<td>Клиффорд Ли Бёртон</td>
<td>1962</td>
<td>Кастро-Валли</td>
</tr>
<tr>
<th>3</th>
<td>Ларс Ульрих</td>
<td>1963</td>
<td>Гентофте, Дания</td>
</tr>
<tr>
<th>4</th>
<td>Кирк Хеммет</td>
<td>1962</td>
<td>Сан-Франциско, Калифорния</td>
</tr>
<tr>
<th>5</th>
<td>Роберт Трухильо</td>
<td>1964</td>
<td>Санта-Моника, Калифорния, США</td>
</tr>
<tr>
<th>6</th>
<td>Джейсон Ньюстед</td>
<td>1963 </td>
<td>Бэттл Крик, Мичиган</td>
</tr>
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function createExpr(arr) {
var index = 0;
var expr = [":containsiAND('" + arr[0] + "')"];
for (var i = 1; i < arr.length; i++) {
if (arr[i] === 'AND') {
expr[index] += ":containsiAND('" + arr[i + 1] + "')";
i++;
} else if (arr[i] === 'OR') {
index++;
expr[index] = ":containsiOR('" + arr[i + 1] + "')";
i++;
}
}
return expr;
}
$(document).ready(function() {

$(".searchKey").keyup(function() {
var searchTerm = $(".searchKey").val().replace(/["']/g, "");
var arr = searchTerm.split(/(AND|OR)/);
var exprs = createExpr(arr);
var searchSplit = searchTerm.replace(/AND/g, "'):containsiAND('").replace(/OR/g, "'):containsiOR('");

$.extend($.expr[':'], {
'containsiAND': function(element, i, match, array) {
return (element.textContent || element.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

$('.results tbody tr').attr('visible', 'false');
for (var expr in exprs) {
$(".results tbody tr" + exprs[expr]).each(function(e) {
$(this).attr('visible', 'true');
});
}

var searchCount = $('.results tbody tr[visible="true"]').length;

$('.searchCount').text('найдено ' + searchCount + ' человек');
if (searchCount == '0') {
$('.no-result').show();
} else {
$('.no-result').hide();
}
if ($('.searchKey').val().length == 0) {
$('.searchCount').hide();
} else {
$('.searchCount').show();
}
});
});
</script>

РЕЗУЛЬТАТ:

{ СМОТРЕТЬ РЕЗУЛЬТАТ }

В таблицу можно добавить сколько угодно списков. Вставьте в таблицу сразу перед </tbody>  вот такой код (т.д. добавляем остальных):

<th>Номер</th>
<td>Имя</td>
<td>Год</td>
<td>Место рождения</td>
</tr>

Если нужно поменять в результате текст «найдено … человек»:

Откройте строку №110 и замените русские слова:

$('.searchCount').text('найдено ' + searchCount + ' человек');

searchCount  - выводит количество найденных в таблице.

Вот и все.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

2 Ответов на комментарий - Как сделать поиск в таблице на сайте

1. Александр

   22.11.2016 в 08:37

   Прикольный пост Степан, даже где то полезный, но больше в статике, хотя… Если работать с бд и выводить с бд всех то скорее пойдет, но это если данных мало, ну а если больше тысячи, то всех же не будешь выводить на одной странице, вот как раз тут бы как то переделать код js чтоб он работал вместе с пхп, чтобы раз и вытащил нужные данные через js, который бы дергал сервер, ну и соответственно сервер брал нужные данные с бд.
   Надо будет как нибудь покавырять эту тему про которую написал.
   А так да, пост полезный
2. Степан => автор блога

   24.11.2016 в 08:48

   Спасибо, Саш!

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: javascript, Вебмастеру, для сайта