Graph-page-filter

Простая и легкая JavaScript-библиотека для подсветки вводимых значений

Особенности

• Никаких зависимостей. Библиотека написана на чистом JavaScript, для работы не требуются иные библиотеки.
• Простота и функциональность. Вы можете легко и быстро подключить и использовать библиотеку, которая реализует подсветку вводимых данных из инпута.
• Настройка с помощью CSS. Настраивать внешний вид подсветки, а также скрывать элементы легко можно только с помощью CSS.
• Поддержка разных регистров. Плагин поддерживает ввод как с строчных, так и заглавных символов.

ДЕМО

Демо плагина

Как работать с библиотекой

1. Скачайте последнюю версию библиотеки
2. Подключите graph-page-filter.min.js из папки dist к странице
3. Поместите в ваш html-документ следующую минимально требуемую разметку:

<input type="search" placeholder="Поиск" name="search" id="search" data-items="first">
<div class="search-result" data-items-target="first">
	<ul>
		<li><a href="#" class="filter-element">Монитор Philips E line 24" [1920x1080@144 Гц, VA, 1 мс]</a></li>
		<li><a href="#" class="filter-element">Монитор Acer Gaming 27" [2560x1440@75 Гц, TN, 1 мс]</a></li>
		<li><a href="#" class="filter-element">Монитор AOC 27G2U/BK 27" [1920x1080@144 Гц, IPS, 1 мс]</a></li>
		<li><a href="#" class="filter-element">Монитор ASUS ZenScreen 14" [1920x1080@60 Гц, IPS, 5 мс]</a></li>
	</ul>
</div>

Важные нюансы

id="search" - селектор инпута, через который и будет производиться поиск. Необязательно использовать именно id.

[data-items] - дата-атрибут, через который будет производиться связь инпута и родителя искомых элементов. Так сделано, чтобы инпут и искомые элементы могли находиться в любом месте страницы.

[data-items-target] - дата-атрибут для связи родителя искомых элементов и инпута. Значение должно быть такое же, как и у [data-items].

.filter-element - класс, который должен быть у искомого элемента для поиска.

4. Разместите следующий JS-код для подключения поиска:

const filter = new GraphPageFilter('#search');

Настройки

Плагин позволяет изменять класс для искомых элементов, класс подсветки, класс скрытия.

1. Свойство highlightClass отвечает за установку класса, по которому будут применены стили "подсветки". Вписывать значение нужно без точки в кавычках. По умолчанию filter-highlight.

2. Свойство childClass отвечает за установку класса, который будет у искомых элементов. Вписывать значение нужно без точки в кавычках. По умолчанию filter-element.

3. Свойство hiddenClass отвечает за установку класса, который будет скрывать элементы, не подходящие поиску. Вписывать значение нужно без точки в кавычках. По умолчанию filter-hidden.

Пример с кастомными классами:

const filter2 = new GraphPageFilter('#search-2', {
	highlightClass: 'custom-highlight',
	childClass:'custom-element',
	hiddenClass: 'custom-hidden'
});

События

Библиотека поддерживает два событие:

1. Событие onInput - срабатывает в момент ввода текста в инпут и вызывается прямо при инициализации. При желании можно передавать экземпляр созданного класса для доступа к данным. Пример:

const filter2 = new GraphPageFilter('#search-2', {
	highlightClass: 'custom-highlight',
	childClass:'custom-element',
	hiddenClass: 'custom-hidden',
	onInput: (filter) => {
		console.log(filter); // экземпляр класса GraphPageFilter
	}
});

2. Событие clear() - событие сброса поиска. Можно вызывать в любом месте вашего скрипта, используя переменную, в которую помещен экземпляр класса. Может пригодиться для принудительного сброса по клику на какую-нибудь кнопку. Пример:

const filter2 = new GraphPageFilter('#search-2');

filter2.clear();

Приятного пользования!