JavaScript · 8 минут

Живой поиск по карточкам без библиотеки

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

Живой пример

Введите, например, css, VS Code или интерфейс. Поиск смотрит на заголовок, описание и скрытые ключевые слова в каждой карточке.

Показано материалов: 4

CSS

Адаптивная сетка

Карточки сами подстраиваются под ширину экрана.

JavaScript

Тема с сохранением

Пользовательский выбор не пропадает после перезагрузки.

Инструменты

VS Code для Python

Редактор, окружение, форматирование и проверка кода.

JavaScript

Поиск по каталогу

Мгновенно находит нужную карточку прямо на странице.

Такой поиск не заменяет поиск по сайту: он фильтрует только уже загруженные карточки. Зато для небольшого каталога он быстрый, понятный и не требует бэкенда.

1. Разметьте поле и карточки

У каждой карточки есть общий атрибут data-searchable-card. В data-search-terms добавьте слова, по которым её тоже можно найти: синонимы, названия технологий и темы.

index.html
<label>
  Поиск
  <input class="catalog-search" type="search" data-card-search
    placeholder="Найти материал">
</label>

<p role="status" aria-live="polite" data-search-status></p>

<div class="catalog-grid">
  <article data-searchable-card
  data-search-terms="css сетка адаптивность интерфейс">
  <h3>Адаптивная сетка</h3>
  <p>Карточки сами подстраиваются под экран.</p>
  </article>
</div>

<p hidden data-search-empty>Ничего не найдено.</p>

2. Добавьте понятное состояние карточек

Атрибут hidden уже скрывает неподходящую карточку. Этот CSS отвечает только за внешний вид поля, сетки и сообщения об отсутствии результата.

style.css
.catalog-search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #8da7dd;
  border-radius: 10px;
  font: inherit;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

[data-searchable-card][hidden] {
  display: none;
}

3. Фильтруйте по вводу

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

search.js
const input = document.querySelector('[data-card-search]');
const cards = [...document.querySelectorAll('[data-searchable-card]')];
const status = document.querySelector('[data-search-status]');
const empty = document.querySelector('[data-search-empty]');

function normalize(value) {
  return value.toLocaleLowerCase('ru-RU').trim();
}

function filterCards(query) {
  let found = 0;

  cards.forEach(card => {
    const text = normalize(`${card.textContent} ${card.dataset.searchTerms}`);
    const matches = text.includes(normalize(query));
    card.hidden = !matches;
    if (matches) found += 1;
  });

  status.textContent = `Найдено материалов: ${found}`;
  empty.hidden = found !== 0;
}

input.addEventListener('input', event => {
  filterCards(event.target.value);
});

Если в поле пусто, строка text.includes('') вернёт true для каждой карточки — значит, каталог автоматически снова покажет всё содержимое.

Что проверить перед публикацией

  1. Ввод находит слова из заголовка и описания карточки.
  2. Ключевые слова из data-search-terms тоже находят нужный материал.
  3. При пустом поле снова видны все карточки.
  4. Когда совпадений нет, посетитель видит понятное сообщение, а не пустое место.
  5. Для большого каталога или поиска по всему сайту используйте серверный поиск: этот вариант работает по загруженным элементам страницы.

Где применять

Каталог статей, программ, товаров или портфолио

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

Ко всем гайдам