搜索框无响应主因是表单submit被阻止且未补逻辑；关键词丢失因缺name属性或未encodeuricomponent；体验优化用原生api即可；结果页空白多因路由或资源路径配置错误。
搜索框没响应？检查 form 的 submit 行为是否被阻止
很多新手写完搜索框，点提交没反应，不是 JS 写错了，而是默认表单提交被静默拦截了。浏览器在没有 action 或 onsubmit 处理时会刷新页面——但若你加了 event.preventDefault() 却没补后续逻辑，就真“没反应”了。
- 确认
<form></form>有明确的onsubmit="handleSearch(event)"或用 JS 绑定，且函数内未遗漏event.preventDefault() - 如果用原生提交（比如跳转到
/search?q=xxx），必须设action="/search"和method="GET"，否则浏览器不知往哪发 - 用
input[type="search"]时，某些旧版 Safari 对submit事件支持不稳定，建议统一用input[type="text"]+ 显式按钮
搜索关键词带空格或特殊字符，后端收不到？看 URL 编码和 name 属性
用户输 “前端 面试题”，提交后后端只收到 “前端”，多半是没做 URL 编码，或者表单字段没设 name。
-
<input name="q">是必须的——没有name，该字段根本不会出现在提交数据里 - 浏览器自动对空格编码为
%20，但手动拼 URL 时（比如用window.location.href = "/search?q=" + value）必须用encodeURIComponent(value)，否则中文、&、+ 全乱 - 后端解析时，如果是 Node.js 的 Express，默认已解码；但 PHP 的
$_GET['q']或 Python Flask 的request.args.get('q')也依赖正确编码，别在 JS 里漏掉encodeURIComponent
搜索框聚焦/清空/语音输入这些体验细节，input 原生 API 就够用
不需要引入 UI 库也能做出干净的交互，关键是用对几个原生事件和属性。
- 自动聚焦：页面加载后执行
document.getElementById("search-input").focus()，但注意移动端弹出软键盘可能遮挡内容，可加setTimeout延迟 300ms - 一键清空：给输入框加
<button type="button" onclick="this.previousElementSibling.value=''; this.previousElementSibling.focus();">✕</button>，避免用form.reset()连带重置其他字段 - 语音输入：仅 Chrome 支持，加
webkitSpeechInput已废弃，现在用speechRecognitionAPI，但需 HTTPS 环境，且用户得主动点击麦克风图标触发，不能自动开启
搜索结果页空白或 404？先查路由和静态资源路径
前端搜完跳转，页面一片白，大概率不是 JS 错，而是路径没配对。
- 如果
form action="/search"，确保服务端有对应路由（如 Express 的app.get('/search', ...)），而不是只写了前端 HTML 里的search.html - 静态网站生成器（如 Hugo、Jekyll）里，搜索页常需手动配置
search.json数据源，路径写成/assets/search.json，但实际部署后可能是/search.json，得看输出目录结构 - 用 Algolia 或 Fuse.js 做前端搜索时，
fetch('/search.json')报 404，先打开浏览器 Network 面板，看请求地址是否多了一层子目录（比如本地跑在http://localhost:1313/blog/，但 JSON 路径写成了绝对路径/search.json）
server.proxy）和生产环境的真实路径。这两者不一致，本地能跑，上线就 404。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
