Уроки Фильтрация данных на JQuery
7 мая 2015
5059
фильтрация данных на jquery, динамический поиск

Фильтрация данных на JQuery

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Очередной скрипт у нас подготовлен для Вас на 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 и был доволен кроссбраузерностью. Поэтому можете смело себе его скачивать и применять в нужных целях. Спасибо всем за внимание!





Роман Краутер