jquery php實時搜索文本在搜索欄中消失

Question

我是jquery的新手，並試圖從我現有的搜索頁面進行實時搜索，您必須按Enter鍵。

這是我迄今爲止所做的代碼。

$(document).ready(function() { 


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


    }); 
}); 

這會得到窗體的輸入並搜索它的每個關鍵字。問題在於每次表單提交時用戶鍵入的文本。我嘗試將搜索值作爲get變量進行發佈，並將其顯示爲搜索欄值，並在每次頁面重新加載時自動將焦點置於搜索欄中，這會在用戶鍵入內容之前將打印欄放在表格的開頭。

我覺得我接近這個錯誤的方式，請幫助。 :)

Answer 1

您需要通過ajax發佈您的表單。這裏有一個簡單的小提琴證明這一點：

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); 
     }   
    });  

});