应使用 fetch 加载本地 medicines.json 文件并构建内存索引，避免直接读取 HTML 表格或 file:// 协议下跨域失败；开发时需通过本地服务器（如 http.server）运行，加载失败要提示，搜索需多字段归一化匹配，渲染用 createElement + textContent 防 XSS。
用 fetch 加载本地 JSON 药品数据，别直接读取 HTML 表格
浏览器禁止跨域读取本地 file:// 下的 JSON，但很多人误以为把药品列表写死在 HTML 表格里就能搜——结果是搜索只能匹配可见 DOM，无法查说明书原文、成分、禁忌等隐藏字段。真正可维护的做法是：准备一个 medicines.json 文件，用 fetch 加载后构建内存索引。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND（直接 fetch('./data.json') 在双击打开的 HTML 中必报）
- 开发时用
python3 -m http.server 8000或 VS Code Live Server 启动本地服务，让页面走http://localhost:8000 - JSON 结构建议包含
name、generic_name、indications、contraindications等字段，别只存药名 - 加载失败时加
catch提示“药品数据未就绪”，别让搜索框静默失效
搜索逻辑用 includes() 还是 indexOf()？优先 toLowerCase() 归一化
用户搜“阿莫西林胶囊”或“阿莫西林”，甚至“amosilin”，都该命中同一款药。纯字符串包含判断比正则更轻量，也避免新手写错 /i 标志或忘记转义。
- 对每个药品字段（如
item.name、item.indications）分别做.toLowerCase().includes(query.toLowerCase()) - 别只搜
name字段——说明书里写的适应症可能才是用户想找的关键信息 - 避免用
RegExp构造动态正则，用户输入括号、点号会直接报错Invalid regular expression - 搜索框加
trim()，防止空格导致""匹配全部数据
渲染结果用 innerHTML 拼接还是 document.createElement？选后者防 XSS
药品说明书中常含斜体（<i>口服</i>）、剂量单位（mg）等简单 HTML 片段。但若直接把 item.indications 插入 innerHTML，攻击者在 JSON 里塞 <script>alert(1)</script> 就能执行任意代码。
立即学习“前端免费学习笔记（深入）”；
- 用
document.createElement('div')创建容器，再用textContent写入纯文本内容（最安全） - 如果必须保留少量格式（如加粗适应症），先白名单过滤：只允许
<strong></strong>、<em></em>、<br>，其余标签全转义 - 别用 jQuery 的
$().html()，它默认不自动转义——哪怕你没引入 jQuery，这个习惯也容易迁移到原生写法中
移动端点击无反馈？给搜索按钮加 touch-action: manipulation
在 iOS Safari 和部分安卓浏览器中，点击按钮延迟约 300ms，用户会感觉“点了没反应”。这不是 JS 慢，是浏览器为双击缩放预留的判断时间。
- 给搜索按钮加 CSS：
button { touch-action: manipulation; } - 同时确保按钮有明确视觉反馈（比如背景色变化），否则用户不确定是否已触发
- 别依赖
onclick事件绑定——用addEventListener('click', ...)更可控，也方便后续加防抖 - 真机测试时关掉 Chrome DevTools 的“Network Throttling”，否则 3G 模拟会让 JSON 加载看起来特别卡，掩盖真实交互问题
药品数据字段多、用户查询意图分散（查用法、查禁忌、查替代药），搜索不能只靠前端字符串匹配。如果说明书文本超过 500 条，得考虑预建倒排索引或引入 flexsearch 这类轻量库——但那是下一步的事，先把 JSON 加载和安全渲染跑通。
