На странице есть форма поиска по каталогу (см. ниже): - Ответ на вопрос по РВПЯJS №2496219

Вопрос

На странице есть форма поиска по каталогу (см. ниже): ˂form id="searchForm"˃ ˂input id="q" name="q" autocomplete="off" /˃ ˂button˃Искать˂/button˃ ˂/form˃ ˂ul id="catalog"˃...˂/ul˃ Требования заказчика (см. ниже): • фильтрация каталога выполняется в реальном времени по мере ввода (без перезагрузки); • запрос нужно сохранить между сессиями и восстанавливать при следующем визите; • недопустить вставку HTML (HyperText Markup Language) при отображении «пустого результата».
Какой вариант удовлетворяет всем требованиям?

• const q = document.getElementById('q'); const list = document.getElementById('catalog'); q.addEventListener('change', () =˃ filter(list, q.value)); sessionstorage.setItem('lastQuery', q.value)
• const q = document.getElementById('q'); const list = document.getElementById('catalog'); q.addEventListener('input', () =˃ { filter(list, q.value); localStorage.setItem('lastQuery', q.value); }); document.addEventListener('DOMContentLoaded', () =˃ { const saved = localStorage.getItem('lastQuery') || ''; q.value = saved; filter(list, saved); }); function showEmpty(message) { const info = document.getElementById('empty') || document.createElement('div'); info.id = 'empty'; info.textContent = message; // безопасно: без HTML document.body.append(info); }
• document.getElementById('searchForm').addEventListener('submit', (e) =˃ { e.preventDefault(); const q = document.getElementById('q').value; filter(document.getElementById('catalog'), q); [removed] = 'lastQuery=' + q; });
• const q = document.getElementById('q'); q.addEventListener('keyup', () =˃ filter(catalog, q.value)); localStorage.setItem('lastQuery', JSON.stringify({q: q.value})); q[removed] = q.value;
• addEventListener('DOMContentLoaded', () =˃ { const q = document.getElementById('q'); const s = localStorage.getItem('lastQuery'); if (s) q.value = s; }); document.getElementById('searchForm').onsubmit = () =˃ filter(catalog, q.value);

Ответ