当用户提交搜索请求并跳转或刷新页面后，搜索框内容常被清空；本文介绍如何通过 javascript 保留并重新填充搜索关键词，确保用户体验连贯、界面状态可追溯。
在 Web 搜索功能开发中，一个常见但易被忽视的细节是：用户输入关键词（如 “apple”）并提交后，页面加载搜索结果时，搜索框却变为空——这不仅影响操作连续性，也降低可访问性和可用性。解决该问题的核心思路是 在结果渲染完成后，主动将原始搜索词重新赋值给输入框。
实现步骤（客户端单页场景）
假设你的搜索框 HTML 如下：
<input type="text" id="search-box" placeholder="Search..." /> <button onclick="performSearch()">Search</button> <div id="results"></div>
在 performSearch() 函数中，先获取输入值，再执行搜索逻辑（如 fetch 请求），最后将该值显式写回输入框：
function performSearch() {
const searchBox = document.getElementById("search-box");
const searchTerm = searchBox.value.trim();
// 防止空搜索
if (!searchTerm) return;
// 显示加载状态（可选）
document.getElementById("results").innerHTML = "<p>Loading...</p>";
// 模拟异步搜索请求
fetch(`/api/search?q=${encodeURIComponent(searchTerm)}`)
.then(response => response.json())
.then(data => {
// 渲染结果（例如插入到 #results）
const resultsHtml = data.items?.map(item =>
`<div><strong>${item.title}</strong>: ${item.desc}</div>`
).join('');
document.getElementById("results").innerHTML = resultsHtml || '<p>No results found.</p>';
// ✅ 关键一步：确保搜索词保留在输入框中
searchBox.value = searchTerm;
})
.catch(err => {
document.getElementById("results").innerHTML = "<p>Search failed.</p>";
console.error("Search error:", err);
});
}? 注意：searchBox.value = searchTerm 必须放在异步回调（如 .then()）内部，而非请求发出前——否则若页面重载或路由跳转，该赋值会被覆盖。若使用前端路由（如 React Router 或 Vue Router），还需结合 useEffect 或 onMounted 在组件挂载后恢复搜索词。
进阶建议
- URL 同步：将搜索词同步至 URL 查询参数（如 ?q=apple），既支持分享与刷新恢复，也利于 SEO 和服务端渲染（SSR）场景。
- 防重复提交：可在提交时禁用按钮，并在结果返回后恢复，避免用户多次点击。
- 无障碍支持：为搜索框添加 aria-label="Search for products" 并确保焦点管理（如结果加载后自动聚焦到结果区域）。
保持搜索框内容不仅是视觉一致性问题，更是构建健壮、用户友好的搜索体验的基础环节。
