jqueryファジークエリユーザー

JQuery ファジー クエリ ユーザー

JQuery は、HTML 要素をクエリおよび操作する関数など、多くの強力な機能を提供する非常に人気のある JavaScript ライブラリです。今回はJQueryを利用して、キーワードを入力して条件に合うユーザーを検索するユーザーファジークエリ機能を実装します。

ステップ 1: 準備

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>

ステップ 2: ユーザー検索機能を実装する 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 コンテンツに設定します。

ステップ 3: ユーザー検索リクエストを処理するための 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 に設定します。返された結果を正しく解析します。

ステップ 4: 検索結果のスタイルを美しくする

検索結果を読みやすくするために、スタイルを追加して美しくすることができます。以下は、ページに追加できる簡単な 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 フォームと結果領域を準備し、次に AJAX リクエストを実装するための JavaScript コードを作成しました。次に、PHP 用のクエリ スクリプトを作成し、結果を JavaScript に返しました。最後に、検索結果領域を整えるためにいくつかのスタイルを追加しました。これらのコードは、他のタイプのクエリまたは検索操作用に拡張でき、特定のニーズに合わせて簡単にカスタマイズできます。

以上がjqueryファジークエリユーザーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。