jquery模糊查詢用戶

JQuery 模糊查詢使用者

JQuery 是一款非常流行的 JavaScript 函式庫，它提供了許多強大的功能，其中包括用於查詢和操作 HTML 元素的函數。在本文中，我們將使用 JQuery 實作一個使用者模糊查詢功能，使用者可以輸入關鍵字來尋找符合條件的使用者。

第一步：準備工作

在 HTML 頁面中，我們需要新增一個表單和用於顯示搜尋結果的元素。表單中包含一個文字方塊和一個按鈕，使用者可以在文字方塊中輸入搜尋關鍵字，然後透過按鈕觸發搜尋操作。搜尋結果將顯示在一個帶有 ID 的 HTML 元素中。

<form action="" method="get">
  <label for="search">搜索用户：</label>
  <input type="text" name="search" id="search">
  <button type="button" id="submit">搜索</button>
</form>
<div id="result"></div>

第二步：編寫 JavaScript 程式碼實作使用者搜尋功能

在 JavaScript 中，我們需要取得使用者輸入的關鍵字，並使用 JQuery 傳送 AJAX 請求。我們將伺服器傳回的結果解析為 JSON 對象，並將其顯示在結果區域中。

// 绑定按钮的点击事件
$("#submit").click(function() {
  var keyword = $("#search").val();
  $.ajax({
    url: "search.php",
    type: "GET",
    data: { keyword: keyword },
    dataType: "json",
    success: function(response) {
      var html = "";
      $.each(response, function(index, user) {
        html += "<div><strong>" + user.name + "</strong> (" + user.username + ")</div>";
      });
      $("#result").html(html);
    }
  });
});

在上面的程式碼中，我們使用 JQuery 的 $.ajax() 方法來傳送 AJAX 請求。請求的 URL 是 search.php，HTTP 方法是 GET，資料包含一個 keyword 參數，值為使用者輸入的關鍵字。 dataType 指定伺服器傳回的資料類型是 JSON。

成功傳回資料後，我們使用 $.each() 方法遍歷每個用戶，將他們的名字和使用者名稱加入 HTML 字串中。最後，我們將字串設定為結果區域的 HTML 內容。

第三步：寫 PHP 程式碼處理使用者搜尋請求

在伺服器端，我們需要使用 PHP 處理使用者搜尋請求。 PHP 程式碼可以讀取資料庫中的用戶信息，並根據用戶輸入的關鍵字查詢匹配的用戶，並將結果以 JSON 格式傳回。

// 连接数据库
$con = mysqli_connect("localhost", "user", "password", "database") or die("数据库连接失败");
mysqli_set_charset($con, "utf8");

// 获取关键字
$keyword = isset($_GET["keyword"]) ? $_GET["keyword"] : "";

// 查询满足条件的用户
$query = mysqli_query($con, "SELECT * FROM users WHERE name LIKE '%$keyword%' OR username LIKE '%$keyword%'");

// 将结果转换为 JSON 格式并返回
$results = array();
while ($row = mysqli_fetch_assoc($query)) {
  $results[] = $row;
}
header("Content-Type: application/json");
echo json_encode($results);

在上面的程式碼中，我們首先連接資料庫，並設定字元集為 UTF-8。然後取得使用者輸入的關鍵字，並執行 SQL 查詢，尋找名字或使用者名稱中包含該關鍵字的使用者。最後，將結果轉換為陣列並使用json_encode() 方法將其轉換為JSON 格式，並設定Content-Type 頭為application/json，以便客戶端正確解析傳回結果。

第四步：美化搜尋結果的樣式

為了讓搜尋結果更具可讀性，我們可以加入一些樣式來美化它。以下是一個簡單的 CSS 樣式，您可以將其新增到頁面中。

#result div {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#result div strong {
  font-weight: bold;
  font-size: 16px;
}

這些樣式將每個搜尋結果新增邊框和圓角，並增加了名稱和使用者名字體大小。

總結

在本文中，我們學習如何使用 JQuery 和 PHP 實作使用者模糊查詢功能。我們首先準備了一個 HTML 表單和結果區域，然後編寫 JavaScript 程式碼以實作 AJAX 請求。接下來，我們為 PHP 編寫了一個查詢腳本，並將結果傳回 JavaScript。最後，我們增加了一些樣式來美化搜尋結果區域。這些程式碼可以擴展為其他類型的查詢或搜尋操作，並且可以輕鬆地自訂以適合特定的需求。

以上是jquery模糊查詢用戶的詳細內容。更多資訊請關注PHP中文網其他相關文章！