pengguna pertanyaan kabur jquery

Pengguna Pertanyaan JQuery Fuzzy

JQuery ialah perpustakaan JavaScript yang sangat popular yang menyediakan banyak ciri berkuasa, termasuk fungsi untuk membuat pertanyaan dan memanipulasi elemen HTML. Dalam artikel ini, kami akan menggunakan JQuery untuk melaksanakan fungsi pertanyaan kabur pengguna, di mana pengguna boleh memasukkan kata kunci untuk mencari pengguna yang memenuhi syarat.

Langkah Pertama: Penyediaan

Dalam halaman HTML, kita perlu menambah borang dan elemen untuk memaparkan hasil carian. Borang tersebut mengandungi kotak teks dan butang Pengguna boleh memasukkan kata kunci carian dalam kotak teks dan kemudian mencetuskan operasi carian melalui butang. Hasil carian akan dipaparkan dalam elemen HTML dengan 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>

Langkah 2: Tulis kod JavaScript untuk melaksanakan fungsi carian pengguna

Dalam JavaScript, kita perlu mendapatkan kata kunci yang dimasukkan oleh pengguna dan menggunakan JQuery untuk menghantar permintaan AJAX. Kami menghuraikan hasil yang dikembalikan oleh pelayan ke dalam objek JSON dan memaparkannya di kawasan hasil.

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

Dalam kod di atas, kami menggunakan kaedah $.ajax() JQuery untuk menghantar permintaan AJAX. URL yang diminta ialah search.php, kaedah HTTP ialah GET dan data mengandungi parameter keyword yang nilainya ialah kata kunci yang dimasukkan oleh pengguna. dataType Menentukan bahawa jenis data yang dikembalikan oleh pelayan ialah JSON.

Selepas berjaya memulangkan data, kami menggunakan kaedah $.each() untuk mengulangi setiap pengguna dan menambah nama pertama dan nama pengguna mereka pada rentetan HTML. Akhir sekali, kami menetapkan rentetan kepada kandungan HTML kawasan hasil.

Langkah 3: Tulis kod PHP untuk mengendalikan permintaan carian pengguna

Di bahagian pelayan, kita perlu menggunakan PHP untuk mengendalikan permintaan carian pengguna. Kod PHP boleh membaca maklumat pengguna dalam pangkalan data, membuat pertanyaan padanan pengguna berdasarkan kata kunci yang dimasukkan oleh pengguna, dan mengembalikan keputusan dalam format 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);

Dalam kod di atas, kami mula-mula menyambung ke pangkalan data dan menetapkan set aksara kepada UTF-8. Kemudian dapatkan kata kunci yang dimasukkan oleh pengguna dan laksanakan pertanyaan SQL untuk mencari pengguna yang nama atau nama penggunanya mengandungi kata kunci tersebut. Akhir sekali, tukar hasil kepada tatasusunan dan gunakan kaedah json_encode() untuk menukarnya kepada format JSON, dan tetapkan pengepala Jenis Kandungan kepada application/json supaya klien boleh menghuraikan hasil yang dikembalikan dengan betul.

Langkah 4: Cantikkan gaya hasil carian

Untuk menjadikan hasil carian lebih mudah dibaca, kami boleh menambah beberapa gaya untuk mencantikkannya. Di bawah ialah gaya CSS ringkas yang boleh anda tambahkan pada halaman anda.

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

Gaya ini menambah jidar dan penjuru bulat pada setiap hasil carian dan meningkatkan saiz fon nama dan nama pengguna.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan JQuery dan PHP untuk melaksanakan fungsi pertanyaan kabur pengguna. Kami mula-mula menyediakan borang HTML dan kawasan hasil, kemudian menulis kod JavaScript untuk melaksanakan permintaan AJAX. Seterusnya, kami menulis skrip pertanyaan untuk PHP dan mengembalikan hasilnya kepada JavaScript. Akhir sekali, kami menambah beberapa gaya untuk merapikan kawasan hasil carian. Kod ini boleh dilanjutkan untuk jenis pertanyaan atau operasi carian lain dan boleh disesuaikan dengan mudah untuk memenuhi keperluan tertentu.

Atas ialah kandungan terperinci pengguna pertanyaan kabur jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!