让浏览器记住输入字段而不提交(或根本没有)表单?

Question

我有一个基于引导程序的Web应用程序(所以，使用jquery)，我正在尝试将经典的基于html表单的搜索表单转换为ajax搜索表单(以避免页面重新加载)。

在基于表单的经典表单中，按钮将 html 表单作为 post 发送，操作页面在同一表单下方返回结果表。

像这样：

<form action="/search" method="post">
<input type="text" name="searchterms">
<button type="button" onclick="submit();">Search!</button>
</form>

在 ajax 版本中，没有表单，只有一个文本字段，按钮调用 dosearch() 函数，该函数向后端脚本发出 ajax 请求，后端脚本返回搜索结果，然后在目标 DIV 中使用，在搜索输入+按钮下方显示结果表。

<input type="text" name="searchterms">
<button type="button" onclick="dosearch();">Search!</button>

两者都工作正常，但第二种方法避免浏览器"收集"以前使用的搜索词 - 我猜是因为没有"提交"。 我的用户喜欢这个"以前的搜索词"建议，如果可能的话，我想在搜索"ajax"表单中添加它。

无论如何，我还尝试创建一个 html 表单，它包含输入和按钮，并将此事件添加到其标签中：

onSubmit='dosearch();return false;'

(如果我不返回 false，则提交表单并加载操作页面)，例如：

<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms">
<button type="button" onclick="dosearch();">Search!</button>
</form>

但即使这样似乎也行不通：新的搜索词不会被"记住"，建议在字段中输入......

我想也许我的 dosearch() 函数可以将(最近的)搜索词添加到会话/cookie 中，但随后我需要读取这些存储的值并每次为输入字段创建一个"下拉列表"，就像浏览器通常自动做的那样......它应该不复杂，但可能矫枉过正...

有没有办法让浏览器"记住"插入的值，即使没有提交？如果没有，哪种解决方法最好/最简单？

编辑：我刚刚找到这个

不使用表单即可记住输入

但也许 5 年后发生了一些变化？

Answer 1

我只是尝试将"按钮"类型更改为"提交"，这样它似乎可以工作......页面没有重新加载，Ajax 填写了结果div，我的新术语被记住了......

喜欢：

<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms">
<button type="submit" >Search!</button>
</form>

似乎如果"提交">

是通过"提交"按钮触发的(即使它返回 false)，浏览器会存储输入字段值......

Answer 2

你需要用ajax

<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms" id="searchTerm">
<button type="button" onclick="dosearch();">Search!</button>

<script type="text/javascript">
function dosearch(){
val = $("#searchTerm").val();
$.ajax({
url: "LoadProduct.php?val ="+val,
type: "GET",
processData: false,
contentType: false,
}).done(function(respond){
$("#LoadProductTd"+no).html(respond);
$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
});
}
</script>

所以你可以创建 LoadProduct.php 文件，在文件中你会得到你的搜索词 n $_GET['val']

因此，您可以将其用于查询