搜索结果返回后如何在搜索框中显示已搜索内容

不管是原生前端还是框架开发，核心思路都是让搜索框的取值始终和用户输入的搜索关键词绑定，以下是不同场景下的具体实现：

原生HTML + JavaScript实现 #

方案1：GET请求后从URL参数回显（推荐） #

这种方式支持刷新页面、分享链接后仍保留搜索内容，体验更完整：

<form id="searchForm" action="/search" method="GET">
  <input type="text" id="searchInput" name="q" placeholder="输入关键词搜索">
  <button type="submit">搜索</button>
</form>

<script>
// 页面加载时读取URL中的搜索参数，回显到输入框
window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const searchWord = urlParams.get('q');
  if (searchWord) {
    document.getElementById('searchInput').value = searchWord;
  }
});
</script>

方案2：异步搜索（AJAX）时直接保留 #

如果用AJAX异步加载结果，只要不主动清空输入框，内容会自动保留：

<input type="text" id="searchInput" placeholder="输入关键词搜索">
<button id="searchBtn">搜索</button>
<div id="resultContainer"></div>

<script>
document.getElementById('searchBtn').addEventListener('click', async () => {
  const query = document.getElementById('searchInput').value.trim();
  if (!query) return;
  
  // 发起异步请求
  const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
  const data = await res.json();
  
  // 渲染结果，输入框内容不会被清空
  document.getElementById('resultContainer').innerHTML = data.map(item => `<p>${item.title}</p>`).join('');
});
</script>

Vue框架实现 #

利用Vue的双向绑定特性，把搜索词存在响应式变量中，搜索后不重置变量即可：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      type="text" 
      placeholder="输入关键词搜索"
    >
    <button @click="doSearch">搜索</button>
    <div v-for="item in results" :key="item.id">{{ item.content }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const searchQuery = ref('');
const results = ref([]);
const route = useRoute();

// 路由跳转后从URL参数回显
onMounted(() => {
  const query = route.query.q;
  if (query) {
    searchQuery.value = query;
    doSearch();
  }
});

const doSearch = async () => {
  if (!searchQuery.value.trim()) return;
  const res = await fetch(`/api/search?q=${encodeURIComponent(searchQuery.value)}`);
  results.value = await res.json();
};
</script>

React框架实现 #

通过状态管理保存搜索词，结合路由参数实现回显：

import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

function Search() {
  const [searchQuery, setSearchQuery] = useState('');
  const [results, setResults] = useState([]);
  const [searchParams, setSearchParams] = useSearchParams();

  // 从URL参数读取搜索词并回显
  useEffect(() => {
    const query = searchParams.get('q');
    if (query) {
      setSearchQuery(query);
      fetchResults(query);
    }
  }, [searchParams]);

  const fetchResults = async (query = searchQuery) => {
    if (!query.trim()) return;
    // 更新URL参数
    setSearchParams({ q: query });
    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
    setResults(await res.json());
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="输入关键词搜索"
      />
      <button onClick={() => fetchResults()}>搜索</button>
      {results.map(item => <p key={item.id}>{item.content}</p>)}
    </div>
  );
}

export default Search;

内容的提问来源于stack exchange，提问作者Hawk Witcher