关于本文
本文采用生成式 AI 的自动化流程创建。我们将 Fuse.js 官方的搜索选项与保存在 GitHub 上的 5 本虚拟图书代码进行了比对。区分了标题精确搜索与允许部分字符和拼写错误的候选搜索。真实浏览器中的运行情况尚未确认。验证状态： 在 2026-10-30 之前的既往审查中，比对了官方资料与已保存的 Daily Code 固定源码，并记录了 Node.js 语法检查的结果。浏览器的实际操作、渲染和 CDN 响应未经验证。屏幕说明是根据代码得出的预期值，与实际测量有所区别。
| 项目 | 内容 |
|---|---|
| 对象 | Chrome/Edge/Firefox 等现代浏览器（实际设备兼容性未确认） |
| 使用库 | Fuse.js（教程内版本：7.5.0） |
| 费用 | 演示源码本身不需要付费 API。通信费用和使用条件取决于运行环境 |
| 数据 | 页面内的虚拟数据。无需认证信息、位置信息或企业数据 |
| 学习操作 | 搜索图书标题，并查看相近候选结果的排序 |
为什么要尝试这项技术
如果只是因为拼写稍有不同就导致搜索结果为零，用户将无法找到已注册的信息。Fuse.js 是一个在客户端执行模糊搜索的 JavaScript 库。它适用于图书标题、读音、分类等小规模数据的候选查找。本次的图书数据仅有虚拟的五本。我们将观察在搜索框中输入部分字符时会出现哪些候选，以及它与精确搜索的区别。应当将“在搜索中找到候选”与“该候选是正确的目标”这两件事分开考虑。
当制作动态示例时，不能仅仅停留在“界面动起来了”这一表面事实，还需要区分“哪个输入改变了哪个变量，哪段逻辑更新了渲染”。在本次教程中，我们将在屏幕上明确显示这种变化。在将其引入实际服务时，请另外设计认证和保存逻辑。
首先尝试：正确的文件与操作步骤
本教程的README位于 web/fusejs-book-search/README.md，而可执行文件在另一个 docs/demos/fusejs-book-search/ 中。如果误以为它们在同一个文件夹并从README一侧寻找 index.html，将会找不到。请参考已于2026-10-28核对过的固定提交。
在 PC 上运行（不依赖公开演示）
将上述的
index.html与app.js保存到同一个新建文件夹中。请不要直接保存 GitHub 的 HTML 显示页面，而是从各文件的 Raw 视图中保存文本。在该文件夹中打开终端，检查是否存在 Python 3。Windows 下使用
py -3 --version，Linux/macOS 下使用python3 --version。如果没有 Python，请不要勉强安装，选择一种能够在现有开发环境中分发静态文件的方法即可。Windows 执行
py -3 -m http.server 8000 --bind 127.0.0.1，Linux/macOS 执行python3 -m http.server 8000 --bind 127.0.0.1。此项指定仅通过本地终端访问。在浏览器中打开
http://127.0.0.1:8000/。请勿关闭已启动的终端，并在结束时按Ctrl+C。如果在公司电脑上禁止使用外部 CDN，请中止执行并查阅相关规定。
预期界面：搜索栏的初始值为 JavaScrip，阈值滑块为 0.3，搜索结果排列为 <ul>，下方的状态显示为 SUCCESS: ○件 / 閾値 0.3。条目数量和排序尚未在实际浏览器中进行测量。即使状态显示为 SUCCESS，也请另外确认是否确实能看到候选名称。
观察完全匹配与“模糊”匹配的区别
图书数据中包含 JavaScript入門、マンガの描き方、ジャバスクリプト実験、地図を作る、図解Web技術 这 5 条记录。
如果按整个标题完全匹配：
book.title === 'JavaScrip'，则匹配项为0 件。这是在代码上比较 5 个字符串后得出的确定结果，并非 Fuse.js 的结果。Fuse.js 的候选搜索：针对搜索栏的
JavaScrip，请在实际浏览器中确认JavaScript入門是否会成为候选。虽然可以处理从开头起的部分匹配或字符缺失，但结果会随阈值或位置设置而变化。将滑块调至0：
threshold: 0并不意味着这是整个标题的完全匹配模式。当搜索词按原样包含在标题开头等位置时，即使整个标题不同也可能会被命中。若要严格识别标题，请使用===或唯一ID比对。清空搜索栏：实现方式是不进行搜索，而是以列表形式显示5项。代码上的预期值为
SUCCESS: 5件 / 閾値 0.3（若将滑块移回）。日语读音混淆：这并非指自动将罗马字
JavaScript与片假名ジャバスクリプト视为等同的功能。
如果在开发者工具的控制台中出现 Fuse is not defined，请检查CDN的加载顺序或网络通信；如果是404，请检查 app.js 的保存位置。即使显示为空但控制台正常，也请逐个还原输入的字符串和阈值。相比结果的数量，更重视用户不会做出错误选择。
机制全景图
flowchart LR
A["入力やクリック"] --> B["イベントを受ける"]
B --> C["Fuse.js のAPI"]
C --> D["状態と描画を更新"]
D --> E["見た目と文字で確認"]
此图为用于学习的概念图，并未表示浏览器内部实现或网络通信的细节。不过，追踪操作会传送到哪个变量是所有库共通的。
它是如何工作的：解读 API
传递给 Fuse 的数组是搜索目标，keys 是要匹配的字段。threshold 用于调整候选结果的宽松程度，越接近 0 则越严格。includeScore 获取的 score 是越小越接近的评估值，但它既不是正确率，也不是简单的编辑距离。在实际的示例界面中，为了方便起见显示为“距离”，但准确来说这是 Fuse.js 的分数。该标签是 Daily Code 未来计划改进显示的候选项。它不能用于用户不确认候选名称而直接自动确定的场景。有关详细信息，请参阅官方模糊搜索的 threshold、location 和 distance以及入门指南中的分数说明。
如何阅读最简代码
const fuse = new Fuse(books, { keys: ["title"], includeScore: true, threshold: 0.3 });
const results = fuse.search("JavaScrip");
// scoreは正解の確率ではない
以上是提取了 API 要点的代码片段。它并不是可以复制并独立运行的完整文件。运行所需的 HTML 和完整实现请在 Daily Code 的 README／演示文件中确认。追踪哪个函数选择 HTML 元素，哪一行更新数值，并使用已知的虚拟值进行测试。
仅更改一个条件进行对比
在这个演示中实际可以更改的是搜索字符串和 threshold 滑块。首先 JavaScrip 输入 后，将滑块依次移动到 0.3 → 0 → 0.7 → 0.3 的位置。在每个阶段，请记录 SUCCESS: ○件 / 閾値 ○ 以及候选名称和排名。由于尚未实际测量条目数，因此不发布保证增减的表格。即使候选没有变化，较短的搜索词也可能与字符串的开头匹配。
如果要进一步开发实现，可以在 keys: ['title'] 中添加 author 或 genre。但是，当前的 5 个条目中没有该字段。仅仅增加 keys，如果没有对应的搜索目标数据就无法进行比较，因此字段添加将作为单独的实验处理。若要验证与完全一致的区别，请分别比较 books.filter(b => b.title === query) 的条目数与 Fuse.js 的 search(query) 的条目数。
发生故障时应检查的地方
日语的全角半角、片假名和平假名、汉字的读音、浊音和清音，仅靠简单的模糊匹配是无法完全涵盖的。如有必要，可在数据侧赋予读音或别名，并另行准备规范化字段。此外，如果搜索目标增加到数十万条，将所有数据传给浏览器的方案会变得笨重，还存在将信息泄露给无权限人员的风险。请确定切换至服务器搜索的界限。
| 观察到的状态 | 排查点 | 应对示例 |
|---|---|---|
| 屏幕保持初始状态不变 | 脚本获取、初始化、事件注册 | 检查 Console / Network / script 标签 |
| 显示内容发生变化但含义不符 | 输入值、数组、单位、更新目标 | 固定值并逐个条件进行检查 |
| 操作搜索栏或滑块时保持不变 | #q/#v 的 input 事件、脚本获取 | 检查 Console 的错误、HTML 的 id 以及 app.js 的加载顺序 |
| 仅在部分终端上无法运行 | 浏览器功能、权限、CDN、性能 | 记录设备与版本、复现操作 |
浏览器内的错误与公开 Web 服务器的故障是不同的。前者通过开发者工具中的错误内容进行调查，后者通过 HTTP 响应或资产分发条件进行调查。切勿将未知的失败表述为成功，这是提升技术备忘录可靠性的关键。
在业务与学习中的应用
可用于内部术语表、部件名称候选显示、事件名搜索、FAQ 导航等场景。但是，对于药品名称或结算对象选择等因误选而产生重大影响的用途，必须将候选显示与确定操作分开，并使用正式的标识符进行核对。即使搜索变得便利，也切勿将识别或批准的责任交由搜索库承担。
在引入前需要确定的事项
面向读者公开时，需确定显示的数据来源、谁可以修改、留在屏幕上的信息种类，以及库更新时的确认项目。本次演示中既没有登录功能，也没有服务器保存功能。因此，在添加运维功能之前，建议首先区分“按预期显示的最小部分”和“需要业务级可靠性、权限和备份的部分”。由于第三方 CDN 涉及外部通信，因此需要提前确认企业网络是否允许使用。
与其他方式进行比较
| 方式 | 适用场景 | 注意事项 |
|---|---|---|
| Fuse.js | 搜索图书标题并查看相近候选排名等符合目的的场景 | 需要管理依赖库的更新及使用条件 |
| 浏览器标准 API | 自己编写小功能 | 自行核对规范与兼容性 |
| 静态图像与表格 | 不需要交互的说明 | 无法即时体验状态的变化 |
库是按需选择的工具。请将你想达成的目标与学习成本进行综合权衡。在小型页面中，不把“引入库”本身作为目的，通常会更容易维护。
GitHub 示例
博客正文用于阐述背景与思路，Daily Code 则用于提供可执行和修改的代码，两者的角色分工明确。其中不包含用于向外部服务发送或保存数据的 API。
官方信息与一手资料
资料查阅范围： 于 2026-10-30 重新核对了官方的快速入门（Getting Started）和模糊搜索（Fuzzy Search）。旧的 /api/options.html 页面返回了 404，因此已将其修正为当前页面。未经验证 CDN 的实际通信及浏览器渲染效果。
验证范围补充说明
可参考 Daily Code 的固定提交以及现有的 Node.js 语法检查结果。但是，其实际浏览器的页面显示、库 CDN 的响应情况以及在所有终端上的运行情况均未经确认。实际运行效果请读者在自己的环境中通过控制台（Console）和网络面板（Network）进行确认。
