如何在触发Apache Solr搜索后保留输入框内的搜索词？

方法一：后端渲染时填充值 #

如果搜索提交后触发页面重载（比如通过表单GET/POST提交），最直接的方式是从URL参数或请求参数中获取查询词，在渲染输入框时设置value属性。

修改后的输入框示例：

<div>
  <input type="text" id="query" autocomplete="off" value="后端获取的查询词" />
</div>

不同后端语言的实现示例：

• Java/JSP：通过request.getParameter("query")获取值，输出到value属性
• Python/Flask：用request.args.get('query', '')获取，模板中渲染value="{{ query }}"
• PHP：通过$_GET['query']（GET提交场景）设置，注意转义：value="<?php echo htmlspecialchars($_GET['query'] ?? ''); ?>"

务必对查询词做HTML转义，避免XSS漏洞。

方法二：前端通过URL参数回填 #

如果想纯前端处理，可在页面加载时读取URL中的查询参数，自动填充到输入框：

document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const query = urlParams.get('query');
  if (query) {
    document.getElementById('query').value = query;
  }
});

只要搜索提交时将查询词以URL参数（如?query=xxx）传递，就能实现自动回填。

方法三：改用AJAX异步提交（避免页面重载） #

如果不想触发页面重载，用AJAX异步发起搜索请求，输入框内容会自然保留：

<div>
  <input type="text" id="query" autocomplete="off" />
  <button id="searchBtn">搜索</button>
</div>

<script>
document.getElementById('searchBtn').addEventListener('click', function() {
  const query = document.getElementById('query').value.trim();
  if (!query) return;

  fetch(`/solr/your_core/select?q=${encodeURIComponent(query)}&wt=json`)
    .then(response => response.json())
    .then(data => {
      // 处理并渲染搜索结果
      console.log(data);
    })
    .catch(error => {
      console.error('搜索出错:', error);
    });
});
</script>

这种方式既保留输入内容，还能提升用户体验。

内容的提问来源于stack exchange，提问作者Victoria Stuart