HTML搜索表單允許輸入文本立即

Question

可能重複：
Focus Input Box On Load

我需要一個HTML搜索表單立即允許輸入文本。與Google相同。我們無需點擊輸入文字到搜索表格

Answer 1

您正在尋找的可以通過幾種不同的方式實現。最簡單的方法是通過jQuery的AJAX POST。我給你一個小例子：

讓我們假設你的搜索輸入具有名稱屬性如

$(function(){ 
    $("input[name='keywords']").keyup(function(){ 
    $(".search_results").slideUp("normal", function(){ 
     $.ajax({ 
     type: "POST", url: "searchquery.php", 
     data: {keywords: $(this).val()}, 
     success: function(response){ 
      if(response != "error") 
      { 
      $(".search_results").html(response); 
      $(".search_results").slideDown(); 
      } 
      else 
      { 
      alert("Error Searching. Please refresh the page and try again."); 
      } 
     } 
     }); 
    }); 
    }); 
}); 

然後，你需要有searchquery.php處理搜索數據庫並返回數據的「關鍵詞」以html格式。也許是這樣的：

if(trim($_POST["keywords"]) != "") 
{ 
    $keywords = mysql_real_escape_string($_POST["keywords"]); 

    //search the DB for maybe 5 top results and return them in something like a HTML list: 
    $results = '<ul><li>first</li><li>second</li></ul>'; 

    die($results); 
} 

你自己格式化的div或HTML對象的類「search_results」定義在它上面。另外，我會建議添加一個計時器，以便每次「擊鍵」功能被擊中時，它會記錄時間並在下次調用文件之前至少進行一次時間。這樣，當有人寫1個字時，PHP文件不會得到5個呼叫。