🔍 Filtro de Pesquisa em Tempo Real

📝 Como Usar

Esta página fornece um filtro de pesquisa em tempo real para texto na página.

Por exemplo, digitar "maçã" exibirá itens como "Maçã" ou "Suco de maçã" imediatamente.
Variações como "MAÇÃ", "maçã" etc. são suportadas.
O texto é normalizado automaticamente para permitir buscas flexíveis.

Você pode copiar e reutilizar livremente o código HTML abaixo em seus próprios sites ou materiais educativos.

Maçã
Banana
Tangerina
Uvas
Melancia
Abacaxi
Melão
Suco de maçã
OpenAI

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8" />
  <title>Filtro de Pesquisa em Tempo Real</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>🔍 Filtro de Pesquisa em Tempo Real</h1>
  <input type="text" id="filterInput" placeholder="Digite uma palavra-chave (ex: maçã ou banana)">

  <ul id="itemList">
    <li>Maçã</li>
    <li>Banana</li>
    <li>Tangerina</li>
    <li>Uvas</li>
    <li>Melancia</li>
    <li>Abacaxi</li>
    <li>Melão</li>
    <li>Suco de maçã</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>

🔧 Filtro inteligente em tempo real: lidando com variações e terminações

Filtros comuns em tempo real geralmente exigem uma correspondência exata entre o que o usuário digita e os itens da lista.
Isso pode causar falhas nos resultados quando há pequenas variações nas terminações das palavras, como “miru” (見る), “mita” (見た) ou “ver”.
Essas diferenças sutis — chamadas de variações ortográficas ou gramaticais — podem prejudicar a experiência de busca.

Este modelo resolve esse problema combinando a conversão katakana ⇔ hiragana com:

Normalização de caracteres de largura total e meia largura (normalize("NFKC"))
Conversão para letras minúsculas (.toLowerCase())
Correspondência parcial baseada na raiz das palavras

Com essa abordagem, ao digitar algo como “suco de mikan”, também serão exibidos resultados como “mikan” (みかん), “100% mikan” ou “sabor mikan”.
Isso aumenta significativamente a precisão e a flexibilidade da busca.

Essa melhoria é ideal para aplicativos educacionais ou ferramentas de busca de produtos, onde diferentes formas de escrita são comuns.

Além de melhorar a experiência do usuário (UX), também contribui para uma maior acessibilidade em diversos contextos e perfis de usuários.