如何实现回车提交搜索后搜索框保留输入文本？

嘿，这个需求很实用！要实现按下回车提交搜索后，搜索框里还留着之前输入的文本，主要有两种思路，看哪种更贴合你的项目场景：

方法一：异步AJAX提交（推荐，无刷新体验） #

这种方式不会刷新整个页面，输入框的内容会自动保留，同时还能异步加载搜索结果，用户体验更流畅。

原生JavaScript实现 #

给表单绑定submit事件，阻止默认的页面跳转行为，再用AJAX发送请求：

const form = document.getElementById('form');
const searchInput = document.getElementById('texto');

form.addEventListener('submit', function(e) {
  // 阻止表单默认的提交刷新行为
  e.preventDefault();
  
  // 获取搜索文本
  const searchQuery = searchInput.value.trim();
  
  if (searchQuery) {
    // 发送AJAX请求到你的后端接口
    fetch('/your-search-api-endpoint', {
      method: 'POST', // 或GET，根据后端配置调整
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `query=${encodeURIComponent(searchQuery)}&onlyActive=${document.getElementById('hide_ended').checked ? 'true' : 'false'}`
    })
    .then(response => response.json())
    .then(data => {
      // 这里处理并展示搜索结果，比如插入到页面的结果容器
      // 示例：document.getElementById('results-container').innerHTML = renderResults(data);
      console.log('搜索结果:', data);
    })
    .catch(error => {
      console.error('搜索出错:', error);
    });
  }
});

jQuery实现（如果项目已引入jQuery） #

$('#form').on('submit', function(e) {
  e.preventDefault();
  
  const searchQuery = $('#texto').val().trim();
  const onlyActive = $('#hide_ended').is(':checked');
  
  if (searchQuery) {
    $.ajax({
      url: '/your-search-api-endpoint',
      method: 'POST',
      data: {
        query: searchQuery,
        onlyActive: onlyActive
      },
      success: function(data) {
        // 处理并渲染搜索结果
        // $('#results-container').html(renderResults(data));
      },
      error: function(xhr, status, error) {
        console.error('搜索失败:', error);
      }
    });
  }
});

方法二：传统表单提交后回填文本 #

如果项目必须用页面刷新式的传统表单提交，就需要在后端返回页面时，把用户提交的搜索参数回填到输入框的value属性里。

比如PHP环境下，修改输入框代码：

<input id="texto" type="text" name="query" class="input form-control" placeholder="Filtrar..." 
       value="<?php echo isset($_GET['query']) ? htmlspecialchars($_GET['query']) : ''; ?>">

（用htmlspecialchars避免XSS攻击）

如果是Python Flask环境：

<input id="texto" type="text" name="query" class="input form-control" placeholder="Filtrar..." 
       value="{{ request.args.get('query', '') }}">

核心逻辑是：后端接收搜索参数后，渲染页面时将参数值传递回前端，设置到输入框的value属性中。

内容的提问来源于stack exchange，提问作者Guillermo Gonzalez