Фильтрация данных на стороне клиента: сравнение CSS, jQuery и React

Предположим, что у нас есть список из 100 имен:

<ul> <li>Randy Hilpert</li> <li>Peggie Jacobi</li> <li>Ethelyn Nolan Sr.</li> <!-- и так далее --></ul>

Их необходимо отфильтровать их на стороне покупателя без выполнения запросов к серверу. При вводе «rand» должна фильтровать список, оставив в нем «Randy Hilpert» и «Danika Randall». Так как в них обоих есть данный набор символов. Рассмотрим, как это можно реализовать при помощи разных технологий.

CSS может сделать это, но с небольшим дополнением

CSS умеет выбирать атрибуты и значения данных атрибутов. Давайте переместим имена в атрибуты.

<ul> <li data-name="Randy Hilpert">Randy Hilpert</li> <li data-name="Peggie Jacobi">Peggie Jacobi</li> <li data-name="Ethelyn Nolan Sr.">Ethelyn Nolan Sr.</li>...</ul>

Отфильтруем получившейся список по запросу «rand»:

li { display: none;}li[data-name*="rand" i] { display: list-item;}

Настройка i в четвертой строке означает, что сортировка осуществляется без учета регистра символов.

Для динамической работы с фильтром <input> нам необходимо задействовать JavaScript. Допустим, что у нас есть блок <style>:

<style id="cssFilter"> /* сюда будет помещен динамически сгенерированный CSS */</style>

Мы можем наблюдать за изменениями в фильтре и генерировать необходимый CSS:

filterElement.addEventListener("input", e => { let filter = e.target.value; let css = filter? ` li { display: none; } li[data-name*="${filter}" i] {     display: list-item;    }  `: ``;  window.cssFilter.innerHTML = css;});

Мы очищаем блок style, когда фильтр пуст. Так что выводится весь список.

jQuery делает это ещё проще

Использование jQuery обеспечивает следующие преимущества:

  • jQuery может выбирать элементы на основе содержимого, который они содержат.
  • Может фильтровать данные только при помощи jQuery.

Мы отслеживаем значения ввода. Если получает термин для фильтрации, скрываем все элементы списка. При этом оставляем только те, которые включат в себя заданный набор символов. Далее снова отображаем все элементы.

const listItems = $("li");$("#filter").on("input", function() {  let filter = $(this).val();  if(filter) {    listItems.hide();    $(`li:contains('${filter}')`).show();  } else {    listItems.show();  }});

Чтобы сделать фильтр нечувствительным к регистру, переопределим способ по умолчанию.

jQuery.expr[':'].contains = function(a, i, m) {  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;};

React может выводить только то, что нам необходимо

Сохраним список в виде массива данных. Изменения во входном запросе и самих данных React при необходимости визуализирует заново.

Если у нас есть names = [array, of, names], его можно отфильтровать следующим образом.

filteredNames = names.filter(name => {  return name.includes(filter);});

Нечувствительность к регистру можно задать следующим образом:

filteredNames = names.filter(name => {  return name.toUpperCase().includes(filter.toUpperCase());});

Далее мы используем JSX и map(), чтобы через цикл перебрать значения массива и вывести подходящие элементы списка.

У меня нет особых предпочтений

Для фильтрации данных на стороне покупателя можно использовать любую из перечисленных технологий. Потому все рассмотренные в данной статье варианты одинаково просты в реализации.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *