utilisateur de requête floue jquery

JQuery Fuzzy Query User

JQuery est une bibliothèque JavaScript très populaire qui fournit de nombreuses fonctionnalités puissantes, notamment des fonctions d'interrogation et de manipulation d'éléments HTML. Dans cet article, nous utiliserons JQuery pour implémenter une fonction de requête floue utilisateur. Les utilisateurs peuvent saisir des mots-clés pour trouver les utilisateurs qui remplissent les conditions.

Première étape : Préparation

Dans la page HTML, nous devons ajouter un formulaire et des éléments pour afficher les résultats de recherche. Le formulaire contient une zone de texte et un bouton. Les utilisateurs peuvent saisir des mots-clés de recherche dans la zone de texte, puis déclencher l'opération de recherche via le bouton. Les résultats de la recherche seront affichés dans un élément HTML avec un identifiant.

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

Étape 2 : Écrivez du code JavaScript pour implémenter la fonction de recherche d'utilisateur

En JavaScript, nous devons obtenir les mots-clés saisis par l'utilisateur et utiliser JQuery pour envoyer une requête AJAX. Nous analysons les résultats renvoyés par le serveur dans un objet JSON et les affichons dans la zone de résultats.

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

Dans le code ci-dessus, nous utilisons la méthode $.ajax() de JQuery pour envoyer la requête AJAX. L'URL demandée est search.php, la méthode HTTP est GET et les données contiennent un paramètre keyword dont la valeur est le mot-clé saisi par l'utilisateur. dataType spécifie que le type de données renvoyé par le serveur est JSON. $.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

Après avoir renvoyé les données avec succès, nous utilisons la méthode $.each() pour parcourir chaque utilisateur et ajouter son nom et son nom d'utilisateur à la chaîne HTML. Enfin, nous définissons la chaîne sur le contenu HTML de la zone de résultats.

Étape 3 : Écrire du code PHP pour traiter les demandes de recherche des utilisateurs

Côté serveur, nous devons utiliser PHP pour traiter les demandes de recherche des utilisateurs. Le code PHP peut lire les informations utilisateur dans la base de données, interroger les utilisateurs correspondants en fonction des mots-clés saisis par l'utilisateur et renvoyer les résultats au format JSON.

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

Dans le code ci-dessus, nous nous connectons d'abord à la base de données et définissons le jeu de caractères sur UTF-8. Récupérez ensuite le mot-clé saisi par l'utilisateur et exécutez une requête SQL pour rechercher les utilisateurs dont le nom ou le nom d'utilisateur contient ce mot-clé. Enfin, convertissez le résultat en tableau et utilisez la méthode json_encode() pour le convertir au format JSON, et définissez l'en-tête Content-Type sur application/json afin que le le client peut l'analyser correctement. Renvoie les résultats.

Étape 4 : Embellir le style des résultats de recherche

Afin de rendre les résultats de recherche plus lisibles, nous pouvons ajouter quelques styles pour l'embellir. Vous trouverez ci-dessous un style CSS simple que vous pouvez ajouter à votre page. 🎜rrreee🎜Ces styles ajoutent des bordures et des coins arrondis à chaque résultat de recherche et augmentent la taille de la police du nom et du nom d'utilisateur. 🎜🎜Résumé🎜🎜Dans cet article, nous avons appris à utiliser JQuery et PHP pour implémenter la fonctionnalité de requête floue de l'utilisateur. Nous avons d'abord préparé un formulaire HTML et une zone de résultats, puis écrit le code JavaScript pour implémenter la requête AJAX. Ensuite, nous avons écrit un script de requête pour PHP et renvoyé les résultats en JavaScript. Enfin, nous avons ajouté quelques styles pour embellir la zone des résultats de recherche. Ces codes peuvent être étendus à d’autres types d’opérations de requête ou de recherche et peuvent être facilement personnalisés pour répondre à des besoins spécifiques. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!