当用户提交搜索请求并跳转到结果页面时，可通过 javascript 获取并重新设置搜索框的 value 属性，确保原始关键词持续显示，提升用户体验与操作连贯性。
在典型的 Web 搜索流程中，用户输入关键词（如 “apple”）并提交表单，页面可能通过 GET 请求跳转至结果页（如 /search?q=apple）或通过 AJAX 动态加载结果。无论哪种方式，保持搜索框内关键词可见都是重要的交互细节——它让用户明确当前所查内容，便于二次编辑或重新搜索。
✅ 实现原理
核心在于：在结果渲染完成后，主动将搜索词写回输入框的 value 属性。这通常发生在以下任一时机：
- 页面加载完成时（适用于服务端渲染的结果页）；
- AJAX 请求成功回调中（适用于前端动态加载）。
? 基础代码示例
假设你的搜索框 HTML 如下：
<input type="text" id="search-box" placeholder="Search..." /> <div id="results"></div>
方式一：服务端跳转后保值（推荐配合 URL 参数）
// 页面加载时，从 URL 查询参数中提取 q 值并还原到搜索框
document.addEventListener('DOMContentLoaded', () => {
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('q');
if (query) {
document.getElementById('search-box').value = decodeURIComponent(query);
}
});方式二：AJAX 搜索后即时还原（适用于 SPA 或局部刷新）
function performSearch() {
const input = document.getElementById('search-box');
const searchTerm = input.value.trim();
if (!searchTerm) return;
// 模拟异步请求
fetch(`/api/search?q=${encodeURIComponent(searchTerm)}`)
.then(res => res.json())
.then(data => {
// 渲染结果（示例）
document.getElementById('results').innerHTML =
data.results.map(item => `<div>${item.title}</div>`).join('');
// ✅ 关键步骤：确保搜索词仍显示在输入框中
input.value = searchTerm; // 即使用户中途修改过，此处强制还原原始搜索词
})
.catch(err => console.error('Search failed:', err));
}⚠️ 注意事项
- 避免覆盖用户新输入：若用户在结果返回前已手动修改搜索框内容，需根据业务逻辑决定是否强制还原（通常建议还原，因“搜索动作”以提交瞬间的值为准）。
- 编码安全：使用 encodeURIComponent() 发送、decodeURIComponent() 解析，防止特殊字符（如空格、中文、& 等）引发 URL 或显示异常。
- 无障碍支持：保持 <input> 的 value 属性同步，有利于屏幕阅读器正确播报当前值。
- 表单重置风险：若页面含 <form onsubmit>，确保 event.preventDefault() 防止默认跳转导致状态丢失。
✅ 总结
保持搜索框关键词显示并非高级技巧，而是基础可用性实践。只需在结果就绪后一行代码赋值即可生效，但结合 URL 参数、事件时机与用户意图综合处理，才能真正实现自然、可靠、可访问的搜索体验。
