Javascript Jquery php Live搜索文本在搜索栏中消失

Javascript Jquery php Live搜索文本在搜索栏中消失,javascript,php,jquery,Javascript,Php,Jquery,我是jquery的新手,正在尝试从我现有的搜索页面进行实时搜索,您必须按enter键 这是我到目前为止所做的代码 $( document ).ready(function() { $('#searchhh').on("input", function() { var searchquery = this.value; $( "#searchform" ).submit(); }); }); 这将获取表单的输入,并在每个关键点搜索它。问题是每次表单提交时,用户键入

我是jquery的新手,正在尝试从我现有的搜索页面进行实时搜索,您必须按enter键

这是我到目前为止所做的代码

$( document ).ready(function() {


   $('#searchhh').on("input", function() {
   var searchquery = this.value;
   $( "#searchform" ).submit();


   });
});
这将获取表单的输入,并在每个关键点搜索它。问题是每次表单提交时,用户键入的文本都会重置。我尝试将搜索值作为get变量发布,并将其显示为搜索栏值,并在每次重新加载页面时自动聚焦到搜索栏中,这会将键入栏置于表单开头,而不是用户键入的内容


我觉得我走错了路,请帮忙。:)

您需要通过ajax发布表单。这里有一个简单的小提琴来演示这一点:

HTML:

<form id="searchform" method="post" action="some_url_here">
    <input type="text" name="search" placeholder="Search..." />
</form>

Results:<br>
<div id="results"></div>
$('#searchform').on("keyup", "input", function() {

    var form_data = $("#searchform").serialize();
    var form_url = $("#searchform").attr("action");
    var form_method = $("#searchform").attr("method").toUpperCase();

    $.ajax({
        url: form_url, 
        type: form_method,      
        data: form_data,     
        cache: false,
        success: function(returnOutput){ 
            // Your search results are outputted here
            $("#results").html(returnOutput); 
        }           
    });    

});