jQuery Ajax 實時搜索

當我們需要實現一個搜索功能時，我們往往會想到使用 Ajax 技術。

下面是一個基于 jQuery 和 Ajax 的實時搜索示例：

$(document).ready(function(){
$('#search-box').keyup(function(){
var query = $(this).val();
if(query.length >= 3){
$.ajax({
url: 'search.php',
type: 'POST',
data: { search: query },
dataType: 'json',
success: function(result){
$('#search-results').html('');
$.each(result, function(){
$('#search-results').append('
' + this.title + '
');
});
}
});
}
});
});

在這個示例中，當用戶輸入關鍵字到搜索框中時，jQuery 的keyup()函數會被觸發，然后 Ajax 請求就會被發送到服務器端的search.php文件。

如果輸入的關鍵字長度超過了 3，則 Ajax 請求返回一組 JSON 格式的數據，這些數據將會被解析并用 HTML 標簽顯示在網頁上。

這個示例很簡單且易于理解，但是它展示了實時搜索功能的核心思想——在用戶輸入時動態地顯示結果。