jquery fuzzy query user

JQuery Fuzzy Query User

JQuery is a very popular JavaScript library that provides many powerful features, including functions for querying and manipulating HTML elements. In this article, we will use JQuery to implement a user fuzzy query function. Users can enter keywords to find users who meet the conditions.

Step One: Preparation

In the HTML page, we need to add a form and elements for displaying search results. The form contains a text box and a button. Users can enter search keywords in the text box and then trigger the search operation through the button. The search results will be displayed in an HTML element with an ID.

<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>

Step 2: Write JavaScript code to implement user search function

In JavaScript, we need to get the keywords entered by the user and use JQuery to send an AJAX request. We parse the results returned by the server into a JSON object and display them in the results area.

// 绑定按钮的点击事件
$("#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);
    }
  });
});

In the above code, we use JQuery’s $.ajax() method to send the AJAX request. The requested URL is search.php, the HTTP method is GET, and the data contains a keyword parameter whose value is the keyword entered by the user. dataType Specifies that the data type returned by the server is JSON.

After successfully returning the data, we use the $.each() method to iterate through each user and add their name and username to the HTML string. Finally, we set the string to the HTML content of the results area.

Step 3: Write PHP code to process user search requests

On the server side, we need to use PHP to process user search requests. The PHP code can read user information in the database, query matching users based on the keywords entered by the user, and return the results in JSON format.

// 连接数据库
$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);

In the above code, we first connect to the database and set the character set to UTF-8. Then get the keyword entered by the user and execute a SQL query to find users whose name or username contains that keyword. Finally, convert the result into an array and use the json_encode() method to convert it to JSON format, and set the Content-Type header to application/json so that the client can correctly parse the returned result .

Step 4: Beautify the style of the search results

In order to make the search results more readable, we can add some styles to beautify it. Below is a simple CSS style that you can add to your page.

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

These styles add borders and rounded corners to each search result, and increase the name and username font size.

Summary

In this article, we learned how to use JQuery and PHP to implement user fuzzy query functionality. We first prepared an HTML form and results area, then wrote the JavaScript code to implement the AJAX request. Next, we wrote a query script for PHP and returned the results to JavaScript. Finally, we added some styles to spruce up the search results area. These codes can be extended for other types of query or search operations and can be easily customized to suit specific needs.

The above is the detailed content of jquery fuzzy query user. For more information, please follow other related articles on the PHP Chinese website!