BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Как сделать поиск в таблице на сайте

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

2016-11-22 / Вр:00:24 / просмотров: 669

Всем привет!
В этой статье я выложу готовый скрипт поиска в таблице, используя 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 type="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="https://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. Александр

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 734
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4010