Фильтрация и поиск в HTML таблице в реальном времени

Быстрый ответ

Чтобы реализовать функцию поиска, которая бы мгновенно фильтровала содержимое HTML-таблицы, используйте сочетание события keyup в JavaScript и манипуляции с DOM.

// Пример функции: "Фильтрация таблицы"
function filterTable() {
  let search = document.getElementById("searchInput").value.toUpperCase().trim();
  let rows = document.getElementById("myTable").getElementsByTagName("tr");

  for (let i = 0; i < rows.length; i++) {
    let firstColumnContent = rows[i].cells[0].textContent.toUpperCase();
    rows[i].style.display = firstColumnContent.includes(search) ? "" : "none";
  }
}

document.getElementById('searchInput').addEventListener('keyup', filterTable);

Добавьте текстовое поле для ввода поисковых запросов:

<input type="text" id="searchInput" placeholder="Начните печатать и увидите, как происходит фильтрация...">
<table id="myTable">
  <!-- Здесь будут располагаться строки вашей таблицы -->
</table>

Вышеуказанный код обеспечивает реализацию быстрого и отзывчивого поиска, который производится в реальном времени. Как только пользователь начинает вводить текст, таблица обновляется без каких-либо задержек.

Оптимизация и обработка пользовательских вводов

Повышение производительности

Учитывая актуальность результатов поиска, которую обеспечивает событие keyup, для предотвращения задержек и избыточных манипуляций с DOM следует провести оптимизацию:

• Реализация дебаунсинга для задержки вызова функции поможет уменьшить количество лишних операций и сделать взаимодействие более плавным.
• Использование метода indexOf и преобразования текста в верхний регистр (toUpperCase) позволяют проводить поиск без учёта регистра, что улучшает пользовательский опыт.

Подробнее об этом расскажет наш спикер на видео

Обработка пользовательских данных

Прежде чем производить поиск, важно очистить поисковую строку от лишних пробелов, чтобы избежать нежелательных результатов и устранить лишние пробелы.

Гибкий поиск с помощью регулярных выражений

Усиленные поисковые запросы, включая сопоставление по шаблону и нечеткое соответствие, можно реализовать с использованием регулярных выражений:

// Улучшенная функция: "Фильтрация с использованием регулярных выражений"
function regexFilterTable() {
  let search = document.getElementById("searchInput").value.trim();
  let searchRegex = new RegExp(search, "i");

  let rows = document.getElementById("myTable").getElementsByTagName("tr");
  for (let i = 0; i < rows.length; i++) {
    rows[i].style.display = searchRegex.test(rows[i].textContent) ? "" : "none";  
  }
}

let debounceTimer;
document.getElementById('searchInput').addEventListener('keyup', function() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => regexFilterTable(), 300);
});

Эффективный и доступный поиск

Снижение нагрузки и повышение доступности

Интеллектуальное управление DOM может помочь снизить нагрузку и ускорить исполнение кода:

• Кэширование элементов, таких как таблица или строки, помогает уменьшить количество запросов к DOM.
• Функции доступности улучшают поддержку экранных читалок, обеспечивая комфортное использование для всех пользователей.

Визуализация

Функцию фильтрации вашей таблицы можно представить как мгновенную сортировочную машину:

Представьте вашу HTML-таблицу как ведро, наполненное яблоками 🍎... но в котором скрыты несколько апельсинов 🍊.

До фильтрации видны и яблоки, и апельсины: 🍎🍎🍎🍊🍎🍎🍊🍎🍊

Как только вы вводите 'яблоко', начинается процесс фильтрации. 🔄

Не яблоко? Тогда удаляем: 🚮

После фильтрации остаются только яблоки: 🍎🍎🍎🍎🍎🍎

Таким образом, в вашем ведре остаются только яблоки, несмотря на то, что изначально там были и яблоки, и апельсины.

Навигация и скорость

Удобство использования для пользователя

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

Быстрые и легко поддерживаемые функции

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

function applySearchToTable(tableId, inputId) {
  // … эффективная функция фильтрации
}

// Данную функцию можно применять к различным таблицам и полям ввода, что упрощает поддержку кода

Полезные материалы

1. Как создать фильтруемую/поисковую таблицу — пошаговая инструкция по созданию фильтруемой таблицы с использованием HTML и JavaScript.
2. Введение в события – Изучение веб-разработки | MDN — общий обзор событий JavaScript, которые важны для реализации поиска в реальном времени.
3. Как отфильтровать html-таблицу простым кодом javascript? – Stack Overflow — обсуждение вопроса о фильтрации таблиц в реальном времени на Stack Overflow.
4. Полное руководство по элементу Table | CSS-Tricks — комплексное руководство по HTML-элементу <table>.
5. GitHub – javve/list.js: Идеальная библиотека для добавления функций поиска, сортировки, фильтрации в таблицы, списки и другие HTML-элементы. — библиотека для расширения функционала таблиц.
6. DataTables | jQuery Table Plugin — jQuery-плагин для улучшения HTML-таблиц.