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模糊查询用户的详细内容。