Как сделать интерактивный сайт: фильтр карточек с проверкой

Интерактивный сайт меняет видимый результат после действия человека. Для первого рабочего примера сделайте фильтр карточек: посетитель вводит слово, список сокращается, счётчик показывает число совпадений, а при пустом результате появляется понятное сообщение. Нужны готовые карточки и доступ к HTML и JavaScript; база данных для такого локального фильтра не требуется.

Какой элемент выбрать для первой версии

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

• Вход: строка, которую посетитель вводит в поле «Найти карточку».
• Действие: сравнение строки с названиями уже показанных карточек.
• Результат: подходящие карточки остаются, число совпадений обновляется.
• Сбой: если ничего не найдено, человек видит сообщение и может очистить поле.
• Граница: фильтр работает только по карточкам этой страницы и не является поиском по всему сайту.

Если нужен только раскрывающийся ответ на вопрос, используйте обычную разметку из разбора FAQ без лишнего JavaScript. Для фильтра же скрипт оправдан: браузер реагирует на ввод сразу. Событие input возникает по мере редактирования текстового поля (MDN).

Как подготовить HTML, который полезен и без скрипта

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

<label for="filter">Найти карточку по названию</label>
<input id="filter" type="search" autocomplete="off">
<p id="filter-status" role="status" aria-live="polite"></p>
<ul id="cards">
  <li data-title="Сайт кафе"><a href="/cafe/">Сайт кафе</a></li>
  <li data-title="Сайт мастера"><a href="/master/">Сайт мастера</a></li>
  <li data-title="Сайт школы"><a href="/school/">Сайт школы</a></li>
</ul>

Адреса в примере замените адресами реальных страниц. Атрибут data-title хранит название для фильтра, а JavaScript читает его через dataset (MDN). Не храните в таком атрибуте закрытые сведения: код страницы доступен посетителю.

По теме: Как сделать политику конфиденциальности на сайт: план и проверка

Как добавить фильтрацию и пустое состояние

Подключите скрипт после разметки или с атрибутом defer, чтобы элементы уже существовали к моменту поиска. Нормализуйте ввод: уберите пробелы по краям и приведите регистр к нижнему. Для каждой карточки выставьте свойство hidden, затем обновите счётчик. hidden скрывает карточку также для вспомогательных технологий, поэтому используйте его только для действительно исключённых результатов (MDN).

const input = document.querySelector("#filter");
const cards = [...document.querySelectorAll("#cards li")];
const status = document.querySelector("#filter-status");
function update() {
  const query = input.value.trim().toLocaleLowerCase("ru");
  let count = 0;
  for (const card of cards) {
    const title = (card.dataset.title || "").toLocaleLowerCase("ru");
    card.hidden = !title.includes(query);
    if (!card.hidden) count++;
  }
  status.textContent = count ? `Найдено карточек: ${count}` : "Ничего не найдено. Измените запрос.";
}
input.addEventListener("input", update);
update();

После запуска все карточки видны, поскольку пустая строка входит в каждое название. Поле типа search обычно даёт способ очистить ввод; после очистки снова вызовется input и появится полный список. Область с role="status" помогает сообщить об изменении результата без переноса фокуса; поведение объявления зависит от сочетания браузера и вспомогательной программы, поэтому проверяйте его отдельно (MDN).

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

Как проверить элемент за несколько минут

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

1. Откройте страницу с включённым скриптом и введите «кафе». Проверьте одну карточку и счётчик.
2. Введите несуществующее слово. Проверьте отсутствие карточек и понятное сообщение.
3. Очистите поле. Проверьте возврат всех карточек без перезагрузки.
4. Пройдите поле и ссылки клавишей Tab. Фокус должен оставаться видимым, а скрытые ссылки не должны получать фокус.
5. Отключите JavaScript или откройте HTML до загрузки скрипта. Все исходные карточки и ссылки должны оставаться доступны.

Если число карточек неверно, проверьте, что у каждой карточки есть уникальный data-title и она находится внутри списка #cards. Если русские буквы дают неожиданный результат, проверьте кодировку страницы и пробелы в названии. Если карточки появляются, но счётчик молчит, область #filter-status могла отсутствовать на странице в момент запуска; подключите скрипт с defer (MDN).

По теме: Как сделать авторизацию на сайте: вход, сессия и права доступа

Где заканчивается локальный фильтр

Этот пример не обращается к серверу и не ищет среди карточек, которых нет в HTML. Для большой коллекции потребуется отдельный поиск по данным, состояние загрузки и обработка ошибок сети. Если фильтр меняет цену, наличие товара или доступ к заказам, вычислять окончательный результат и проверять права нужно на сервере. Для формы заявки скрипт может улучшить подсказки, но отправку и проверку данных нужно проектировать отдельно.

При сборке с ИИ дайте ему точное задание: «Сделай фильтр существующих карточек по названию; не удаляй ссылки; добавь число результатов, пустое состояние и работу без JavaScript; перечисли проверки для клавиатуры». Затем сравните результат с таблицей ожидаемых случаев. Так появляется проверяемый элемент, а не набор случайных анимаций.

Частые вопросы

Можно ли сделать интерактивный сайт без базы данных?

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

Нужен ли JavaScript для любого взаимодействия?

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

Почему фильтр не ищет по всему сайту?

Он видит только карточки в текущем HTML. Для поиска по всем страницам нужен отдельный индекс или серверный поиск.

Что показать, если совпадений нет?

Напишите, что ничего не найдено, и оставьте человеку видимое поле для изменения или очистки текста.