如何让浏览器记住Ajax搜索框的输入内容（无需提交表单）？

其实你遇到的核心问题是：浏览器的原生输入历史/自动提示，是基于表单提交行为来触发记录的——哪怕你用了form标签，但之前的实现里没有真正触发浏览器认可的“表单提交流程”，所以它不会把输入值加入历史库。

最优原生方案（几乎不用额外代码） #

你只需要调整一下表单和按钮的设置，就能让浏览器自动记录搜索词，完全不需要自己写存储逻辑：

<form action="/search" method="post" onsubmit="dosearch(); return false;">
  <input type="text" name="searchterms" autocomplete="on">
  <button type="submit">Search!</button>
</form>

关键调整点： #

1. 给表单补上action和method：和你原来的传统表单保持一致，哪怕我们不会真的提交到这个地址——浏览器需要这些属性来识别这是一个“有效”的表单。
2. 把按钮改成type="submit"：之前的type="button"只会触发你写的onclick，不会触发表单的onsubmit事件；改成submit后，点击按钮或者按回车都会触发onsubmit，浏览器会把这个动作当成“表单提交尝试”，进而记录输入值。
3. 保留return false阻止页面跳转：这部分不用改，确保Ajax逻辑正常运行，不会触发传统表单提交。
4. 明确设置autocomplete="on"：虽然大部分浏览器默认开启，但加上它能避免个别浏览器的兼容性问题。

这样调整后，浏览器会像原来的传统表单一样，自动记录你的搜索词并给出下拉提示，完全复用原生功能，不用额外写一行JS。

备选方案：自定义历史提示（当原生方案失效时） #

如果某些旧浏览器不支持上述方法，或者你不想用form标签，最简的替代方案是用前端本地存储（localStorage）来实现，代码量不大且无需后端配合：

1. 存储搜索历史的JS逻辑 #

function dosearch() {
  const searchInput = document.querySelector('input[name="searchterms"]');
  const searchTerm = searchInput.value.trim();
  
  if (!searchTerm) return;

  // 读取现有历史，去重并保留最近10条
  let searchHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];
  if (!searchHistory.includes(searchTerm)) {
    searchHistory.push(searchTerm);
    if (searchHistory.length > 10) searchHistory.shift();
    localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
  }

  // 你的原有Ajax逻辑
  $.post('/search', { searchterms: searchTerm }, function(data) {
    $('#resultsDiv').html(data);
  });
}

// 输入时显示提示
document.querySelector('input[name="searchterms"]').addEventListener('input', function(e) {
  const searchTerm = e.target.value.trim();
  const searchHistory = JSON.parse(localStorage.getItem('searchHistory')) || [];
  const matches = searchHistory.filter(term => term.toLowerCase().includes(searchTerm.toLowerCase()));

  // 用Bootstrap的列表组件生成提示
  let suggestionsHtml = '';
  if (matches.length > 0) {
    suggestionsHtml = '<ul class="list-group position-absolute bg-white border rounded shadow-sm">';
    matches.forEach(term => {
      suggestionsHtml += `<li class="list-group-item list-group-item-action" onclick="document.querySelector('input[name=searchterms]').value='${term}'; dosearch();">${term}</li>`;
    });
    suggestionsHtml += '</ul>';
  }
  $('#searchSuggestions').html(suggestionsHtml);
});

2. 对应的HTML结构 #

<div class="position-relative">
  <input type="text" name="searchterms" autocomplete="off">
  <button type="button" onclick="dosearch();" class="btn btn-primary ms-2">Search!</button>
  <div id="searchSuggestions" style="z-index: 1000;"></div>
</div>

这个方案的好处是完全可控，样式可以和你的Bootstrap风格统一，而且不需要依赖浏览器的原生行为，兼容性更好。

内容的提问来源于stack exchange，提问作者m.ardito