🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

🔍 Real-Time Text Search Filter

📝 How to Use

This page provides a real-time filter for in-page text search.

  • For example, typing "apple" will instantly match items like "Apple" or "Apple Juice".
  • Uppercase/lowercase variations like "APPLE" or "apple" are all supported.
  • Text is automatically normalized to allow flexible searching.

You can freely copy and reuse the HTML code below in your own pages or learning materials.



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Real-Time Text Search Filter</title>
  <style>
    body { font-family: sans-serif; padding: 2rem; max-width: 600px; margin: auto; }
    input[type="text"] {
      width: 100%; padding: 10px; font-size: 1.1rem; margin-bottom: 1rem;
      border: 1px solid #ccc; border-radius: 5px;
    }
    ul { list-style-type: none; padding: 0; }
    li { padding: 8px; border-bottom: 1px solid #ddd; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <h1>🔍 Real-Time Text Search Filter</h1>
  <input type="text" id="filterInput" placeholder="Enter keyword (e.g., apple or banana)">

  <ul id="itemList">
    <li>Apple</li>
    <li>Banana</li>
    <li>Mandarin</li>
    <li>Grapes</li>
    <li>Watermelon</li>
    <li>Pineapple</li>
    <li>Melon</li>
    <li>Apple Juice</li>
    <li>OpenAI</li>
  </ul>

  <script>
    const input = document.getElementById("filterInput");
    const items = document.querySelectorAll("#itemList li");

    input.addEventListener("input", () => {
      const keyword = input.value.trim().toLowerCase().normalize("NFKC");
      items.forEach(item => {
        const text = item.textContent.toLowerCase().normalize("NFKC");
        item.classList.toggle("hidden", !text.includes(keyword));
      });
    });
  </script>
</body>
</html>

🔧 A Smarter Real-Time Filter: Handling Word Variations and Endings

Standard real-time filters often require an exact match between the user's input and the list items.
This can cause missed results when there are small differences in word endings, such as “miru” (見る), “mita” (見た), or “miru” (to see) in Japanese.
These slight variations—called inflectional or orthographic differences—can impact usability.

This template addresses that by combining katakana ⇔ hiragana conversion with:

  • Full-width and half-width normalization (normalize("NFKC"))
  • Lowercase conversion (.toLowerCase())
  • Partial matching based on word roots

With this approach, entering something like “mikan juice” will also show results like “mikan” (みかん), “100% mikan”, or “mikan-flavored”.
This significantly improves match accuracy and tolerance.

This kind of improvement is ideal for educational apps or product search tools where users may use different spellings or expressions.

It not only enhances UX and usability, but also contributes to better accessibility across a wider range of users and environments.

Related Templates