如何在預覽搜索結果的網頁上製作其中一個搜索框？

Question

我正在開發一個網站，它有一個搜索框作爲標準頁面模板的一部分（類似於您在SO網站右上角看到的內容）。我想動態預覽可能的用戶輸入匹配項，類似於您開始在google.com搜索頁中輸入查詢時看到的內容，如同在搜索框下方顯示的下拉菜單。你怎麼做到這一點？某種JavaScript/Ajax組合？

Answer 1

有一個流行的jQuery plugin來實現這一點。 Check the docs。

Answer 2

您可以使用jQuery來做到這一點，並且當事件（或相關事件）被觸發時，您可以觸發對服務器或本地字詞集的請求，並顯示所有匹配的字詞箱子下方的div。

$("#searchbox").keyup(function(){ 
    $.post("suggestions.php", {data:$(this).val()}, function(response) { 
    $("#suggestions").html(response).slideDown(); 
    }, "HTML"); 
}).blur(function(){ 
    $("#suggestions").slideUp(); 
}); 

/* 
--------------------- 
| ph_    | 
--------------------- 
| philanthropy  | 
| photoshop   | 
| PHP    | 
--------------------- 
*/