javascript - Jquery php实时搜索文本在搜索栏中消失

Question

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

这是我迄今为止编写的代码。

$( document ).ready(function() {


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


   });
});

这会获取表单的输入并在每次按键时对其进行搜索。问题是每次提交表单时用户键入的文本都会重置。我尝试将搜索值作为 get 变量发布，并将其显示为搜索栏值，并在每次页面重新加载时自动聚焦到搜索栏，这将打字栏放在用户​​输入内容之前的表单开头.

我觉得我正在以错误的方式处理这个问题，请帮忙。 :)

Answer 1

您需要通过 ajax 发布表单。这是一个简单的 fiddle 来演示这一点:

http://jsfiddle.net/e76d09vw/

HTML:

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

Results:<br>
<div id="results"></div>

JS:

$('#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); 
        }           
    });    

});