🔍 实时文本搜索

📝 使用方法

此页面提供一个支持大小写的实时文本过滤器。

在输入框中输入关键词（例如：apple），会即时过滤显示相关条目。
支持“apple”,“Apple”,“APPLE”等大小写形式。
关键词将与列表内容进行模糊匹配。

您可以自由复制下方 HTML 代码，用于您的网页或教学项目中。

苹果
香蕉
橘子
葡萄
西瓜
菠萝
哈密瓜
苹果汁
开放人工智能

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>实时文本搜索过滤器</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>🔍 实时文本搜索</h1>
  <input type="text" id="filterInput" placeholder="请输入关键词（例如：apple）">

  <ul id="itemList">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>葡萄</li>
    <li>西瓜</li>
    <li>菠萝</li>
    <li>哈密瓜</li>
    <li>苹果汁</li>
    <li>开放人工智能</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>

🔧 智能实时筛选器：支持词尾变化与表记差异

一般的实时筛选功能通常要求用户输入内容与列表项完全匹配才能显示结果。
这就可能导致在存在细微差异时（如 “miru” (見る)、“mita” (見た) 或 “观看”），搜索结果为空。
这些细节差异，也被称为词尾变化或书写差异，可能会影响用户体验。

本模板通过结合 片假名 ⇔ 平假名转换，并辅以以下处理方式，有效解决上述问题：

全角与半角字符规范化（normalize("NFKC")）
统一为小写字母（.toLowerCase()）
基于词根的部分匹配机制

借助这些处理方式，当输入“蜜柑果汁”时，也能匹配到如“蜜柑”（みかん）、“100%蜜柑”、“蜜柑风味”等相关项，
有效提升了搜索的准确性与容错性。

此类改进特别适用于教育类应用或商品搜索工具，可应对用户输入的多种表达形式。

不仅优化了 用户体验（UX），还进一步提升了无障碍访问性，适用于更多用户与使用场景。