How To: Filter & Search List Items

« How To: Toast & Snackbar Notifications« Previous How To: HTML5 Drag & Drop File Upload »Next »

Create instant, case-insensitive client-side search filters with highlighting and zero lag.

Case-Insensitive List Filtering

By listening to the input event on a search input, you can filter table rows, product cards, or list elements in real time.

Live Search Filter Script

Try It Yourself »

function setupSearchFilter(inputId, listContainerId) {
  const searchInput = document.getElementById(inputId);
  const items = document.querySelectorAll(`#${listContainerId} .searchable-item`);

  searchInput.addEventListener('input', (e) => {
    const query = e.target.value.toLowerCase().trim();

    items.forEach(item => {
      const text = item.textContent.toLowerCase();
      if (text.includes(query)) {
        item.style.display = '';
      } else {
        item.style.display = 'none';
      }
    });
  });
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which JavaScript event fires synchronously on an <input> whenever its value changes through typing or pasting?

« Previous: How To: Toast & Snackbar Notifications Next: How To: HTML5 Drag & Drop File Upload »