jQuery是一個非常流行的JavaScript庫,通過它,我們可以快速、簡單地實現各種功能。其中,ajax是一項強大的技術,可以使我們在不刷新頁面的情況下發送HTTP請求,并且異步加載數據。下面我們就來看一下jQuery ajax的模糊搜索。
首先,我們需要在HTML中創建一個輸入框和一個結果框,代碼如下:
<input type="text" id="searchInput" placeholder="請輸入搜索內容"> <div id="resultBox"></div>
接著,在JavaScript中我們需要編寫ajax請求的代碼。我們使用jQuery的ajax方法來發送請求,代碼如下:
$(document).ready(function(){ $("#searchInput").on("keyup", function() { var inputValue = $(this).val(); if(inputValue.length >0) { $.ajax({ url: "search.php", type: "POST", data: {inputValue: inputValue}, success: function(data){ $("#resultBox").html(data); } }); } }); });
上述代碼中,我們首先添加了一個監聽器,當輸入框中的值發生變化時,就會觸發一個ajax請求。我們將輸入框中的值通過POST方式發送到search.php頁面,然后將返回的數據更新到結果框中。
最后,在search.php頁面中,我們需要編寫SQL語句進行模糊搜索,并返回相關的數據。代碼如下:
$inputValue = $_POST['inputValue']; $sql = "SELECT * FROM `user` WHERE `name` LIKE '%$inputValue%'"; //執行SQL語句 ...
通過以上的代碼,我們就可以實現一個簡單的模糊搜索功能了。
下一篇在新標簽打開css