Очередной скрипт у нас подготовлен для Вас на JQuery, не знаю как так получается, но последнее время у меня получается писать материалы только на этом языке веб программирования. В общем, поговорим сегодня о фильтрации данных на JQuery. Тема думаю весьма актуальна, да и будет пользоваться спросом, ведь фильтрация данных или динамический поиск, можно увидеть на многих сайтах, особенно в интернет-магазинах.
Фильтрация нужна для быстрой сортировки по какому-либо критерию. Допустим, у нас имеется список имен в огромном количестве, но нам надо отсортировать только определенные имена и из них выбрать конкретное, которое нам нужно. По сути данный способ можно и назвать сортировкой, правда отличия все же имеются. В данном случае, мы просто вводим в текстовое поле поиска нужную нам букву и уже начинается фильтрация, а при сортировке нужно отсортировать по категориям, имени, фамилии, возрасту и и т.п.. В общем, я думаю смысл Вы уловили.
Кстати, пока не забыл, имеется похожая тема автозаполнение на JavaScript, но там смысл немного другой.
Первая часть. HTML.
Сначала подключаем, как обычно, стили и js-скрипты. Файл стилей demo.css, библиотеку jquery.js и файл filter.js, который будет выполнять необходимые действия по фильтрации данных.
<link type="text/css" rel="stylesheet" href="css/demo.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/filter.js"></script>
Теперь нам надо создать поле фильтрации по поиску и вывести необходимый список имен в строчку. Для этого мы создаем input с именем name="search", а также не забываем про идентификатор search и атрибут placeholder.
<div class="div_search"> <input type="text" name="search" id="search" placeholder="Введите одно из слов ниже..."> </div>
Далее переходим к созданию списка самих имен в строчку. Для этого прописываем тег div с классом div_name и в него помещаем в тегах span имена. Тег hr нужен, непосредственно, для красивого формирования списка.
<div class="div_name"> <span>Roman<hr></span> <span>Dmitry<hr></span> <span>Alex<hr></span> <span>Natasha<hr></span> <span>Egor<hr></span> <span>Anna<hr></span> </div>
Вторая часть. CSS.
С HTML мы вроде разобрались, теперь можем придать стилизацию для нашего окна фильтрации и списка имен в строку. Описывать тут особо нечего, так как все просто.
.div_search{
background: #000000;
padding: 10px;
width: 300px;
margin-bottom: 20px;
border-radius: 10px;
}
.div_search input{
width: 300px;
height: 30px;
font-size: 18px;
}
.div_name{
width: 300px;
margin: 10px;
}
.name{
width: 300px;
}
.div_name span{
font-size:18px;
line-height: 40px;
}
.div_name hr{
border-bottom: 1px solid #808080 ;
}
Третья часть. JQUERY.
Самая интересная часть данного скрипта, как раз последняя, связанная напрямую с фильтрацией данных. Давайте данный скрипт разделим на две части, чтобы удобно было Вам меня понять.
Сначала мы создаем функцию, которая будет производить сброс данных в поле фильтрации по нажатию кнопки ESC. В скрипте данная функция идет на третьей строке и называется keyCode == 27. Именно цифра 27 отвечает за кнопку ESC. Смысл функции event с идентификатором search в том, чтобы при запросе ключа нужных данных, она считывала данные и добавляла или удаляла соответствующий класс.
При функции removeClass с классом name, относящаяся к элементу тега span, мы добавляем ему свойство display: none;, что означает, то что мы хотим скрыть данный элемент.
При функции addClass с классом name, относящаяся к элементу тега span, мы добавляем ему класс name, который формирует имена в стилях css.
На четвертой строке, выполняется оператор, который проверяет на наличие символов в поле фильтрации.
$(document).ready(function() {
$('#search').keyup(function(event) {
if (event.keyCode == 27 || $(this).val() == '') {
$(this).val('');
$('span').removeClass('name').show().addClass('name');
}
else {
filter('span', $(this).val());
}
});
});
Переходим ко второй части нашего скрипта, которая производит поиск по нужному нам имени из списка строк. Назовем функцию filter и дадим ей два параметра: первый - filter, второй - query. Первый параметр filter производит фильтрацию из первой части нашего скрипта, второй параметр query, предназначен для удаления пробелов сначала и конца слова.
Далее мы создаем регулярное выражение RegExp, которое будет, взаимодействовать с фильтрацией и при количестве больше одного символа, искать нужное нам слово.
function filter(filter, query) {
query = $.trim(query);
$(filter).each(function() {
($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('name') :
$(this).show().addClass('name');
});
}
Ну, а теперь весь скрипт полностью. Вернее файл filter.js.
$(document).ready(function() {
$('#search').keyup(function(event) {
if (event.keyCode == 27 || $(this).val() == '') {
$(this).val('');
$('span').removeClass('name').show().addClass('name');
}
else {
filter('span', $(this).val());
}
});
});
function filter(filter, query) {
query = $.trim(query);
$(filter).each(function() {
($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('name') :
$(this).show().addClass('name');
});
}
Данный скрипт я лично проверял на всех последних версиях браузеров IE, Firefox, Safari, Opera и Chrome и был доволен кроссбраузерностью. Поэтому можете смело себе его скачивать и применять в нужных целях. Спасибо всем за внимание!