Фильтрация данных на стороне клиента: сравнение 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, когда фильтр пуст. Поэтому отображается весь список.

0

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;
};

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(), чтобы через цикл перебрать значения массива и вывести подходящие элементы списка.

0

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

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

Данная публикация представляет собой перевод статьи «Filtering Data Client-Side: Comparing CSS, jQuery, and React» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню