如何在搜索结果返回后保持搜索框中显示已输入的关键词

聖光之護 2026-01-23 00:00:00 次阅读

当用户提交搜索请求并跳转或刷新页面后，搜索框内容常被清空；本文介绍如何通过 javascript 保留并重新填充搜索关键词，确保用户体验连贯、界面状态可追溯。

在 Web 搜索功能开发中，一个常见但易被忽视的细节是：用户输入关键词（如 “apple”）并提交后，页面加载搜索结果时，搜索框却变为空——这不仅影响操作连续性，也降低可访问性和可用性。解决该问题的核心思路是 在结果渲染完成后，主动将原始搜索词重新赋值给输入框。

实现步骤（客户端单页场景）

假设你的搜索框 HTML 如下：

在 performSearch() 函数中，先获取输入值，再执行搜索逻辑（如 fetch 请求），最后将该值显式写回输入框：

function performSearch() {
  const searchBox = document.getElementById("search-box");
  const searchTerm = searchBox.value.trim();

  // 防止空搜索
  if (!searchTerm) return;

  // 显示加载状态（可选）
  document.getElementById("results").innerHTML = "Loading...";

  // 模拟异步搜索请求
  fetch(`/api/search?q=${encodeURIComponent(searchTerm)}`)
    .then(response => response.json())
    .then(data => {
      // 渲染结果（例如插入到 #results）
      const resultsHtml = data.items?.map(item => 
        `${item.title}: ${item.desc}`
      ).join('');
      document.getElementById("results").innerHTML = resultsHtml || 'No results found.';

      // ✅ 关键一步：确保搜索词保留在输入框中
      searchBox.value = searchTerm;
    })
    .catch(err => {
      document.getElementById("results").innerHTML = "Search failed.";
      console.error("Search error:", err);
    });
}

? 注意：searchBox.value = searchTerm 必须放在异步回调（如 .then()）内部，而非请求发出前——否则若页面重载或路由跳转，该赋值会被覆盖。若使用前端路由（如 React Router 或 Vue Router），还需结合 useEffect 或 onMounted 在组件挂载后恢复搜索词。