jquery-Fuzzy-Query-Benutzer

JQuery Fuzzy Query User

JQuery ist eine sehr beliebte JavaScript-Bibliothek, die viele leistungsstarke Funktionen bietet, darunter Funktionen zum Abfragen und Bearbeiten von HTML-Elementen. In diesem Artikel verwenden wir JQuery, um eine Benutzer-Fuzzy-Abfragefunktion zu implementieren, bei der Benutzer Schlüsselwörter eingeben können, um Benutzer zu finden, die die Bedingungen erfüllen.

Schritt Eins: Vorbereitung

In der HTML-Seite müssen wir ein Formular und Elemente für die Anzeige von Suchergebnissen hinzufügen. Das Formular enthält ein Textfeld und eine Schaltfläche. Benutzer können Suchbegriffe in das Textfeld eingeben und dann den Suchvorgang über die Schaltfläche auslösen. Die Suchergebnisse werden in einem HTML-Element mit einer ID angezeigt.

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

Schritt 2: Schreiben Sie JavaScript-Code, um die Benutzersuchfunktion zu implementieren

In JavaScript müssen wir die vom Benutzer eingegebenen Schlüsselwörter abrufen und JQuery verwenden, um eine AJAX-Anfrage zu senden. Wir analysieren die vom Server zurückgegebenen Ergebnisse in ein JSON-Objekt und zeigen sie im Ergebnisbereich an.

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

Im obigen Code verwenden wir die Methode $.ajax() von JQuery, um die AJAX-Anfrage zu senden. Die angeforderte URL ist search.php, die HTTP-Methode ist GET und die Daten enthalten einen keyword-Parameter, dessen Wert das vom Benutzer eingegebene Schlüsselwort ist. dataType gibt an, dass der vom Server zurückgegebene Datentyp JSON ist. $.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

Nach erfolgreicher Rückgabe der Daten verwenden wir die Methode $.each(), um jeden Benutzer zu durchlaufen und seinen Namen und Benutzernamen zur HTML-Zeichenfolge hinzuzufügen. Abschließend setzen wir den String auf den HTML-Inhalt des Ergebnisbereichs.

Schritt 3: PHP-Code schreiben, um Benutzersuchanfragen zu verarbeiten

Auf der Serverseite müssen wir PHP verwenden, um Benutzersuchanfragen zu verarbeiten. Der PHP-Code kann Benutzerinformationen in der Datenbank lesen, passende Benutzer basierend auf den vom Benutzer eingegebenen Schlüsselwörtern abfragen und die Ergebnisse im JSON-Format zurückgeben.

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

Im obigen Code stellen wir zunächst eine Verbindung zur Datenbank her und stellen den Zeichensatz auf UTF-8 ein. Rufen Sie dann das vom Benutzer eingegebene Schlüsselwort ab und führen Sie eine SQL-Abfrage aus, um Benutzer zu finden, deren Name oder Benutzername dieses Schlüsselwort enthält. Konvertieren Sie abschließend das Ergebnis in ein Array und verwenden Sie die Methode json_encode(), um es in das JSON-Format zu konvertieren, und setzen Sie den Content-Type-Header auf application/json, damit die Der Client kann es korrekt analysieren und Ergebnisse zurückgeben.

Schritt 4: Verschönern Sie den Stil der Suchergebnisse

Um die Suchergebnisse besser lesbar zu machen, können wir einige Stile hinzufügen, um sie zu verschönern. Nachfolgend finden Sie einen einfachen CSS-Stil, den Sie Ihrer Seite hinzufügen können. #🎜🎜#rrreee#🎜🎜#Diese Stile fügen jedem Suchergebnis Rahmen und abgerundete Ecken hinzu und erhöhen die Schriftgröße für Namen und Benutzernamen. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel haben wir gelernt, wie man JQuery und PHP verwendet, um Benutzer-Fuzzy-Abfragefunktionen zu implementieren. Wir haben zunächst ein HTML-Formular und einen Ergebnisbereich vorbereitet und dann den JavaScript-Code geschrieben, um die AJAX-Anfrage zu implementieren. Als nächstes haben wir ein Abfrageskript für PHP geschrieben und die Ergebnisse an JavaScript zurückgegeben. Schließlich haben wir einige Stile hinzugefügt, um den Suchergebnisbereich aufzupeppen. Diese Codes können für andere Arten von Abfrage- oder Suchvorgängen erweitert und leicht an spezifische Anforderungen angepasst werden. #🎜🎜#

Das obige ist der detaillierte Inhalt vonjquery-Fuzzy-Query-Benutzer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!