PHP dan Ajax: Membina enjin cadangan autolengkap

Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Contoh praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.

PHP dengan Ajax: Membina Enjin Cadangan Autolengkap

Pengenalan

Enjin cadangan autolengkap ialah alat berguna yang membantu pengguna mencari cadangan dalam medan input. Ia biasanya digunakan dalam medan carian, medan alamat dan kawasan input teks lain. Artikel ini akan membimbing anda membina enjin cadangan autolengkap menggunakan PHP dan Ajax.

Skrip Sisi Pelayan

Pertama, kami memerlukan skrip PHP untuk mengendalikan permintaan Ajax dan cadangan pengembalian. Cipta fail bernama autocomplete.php dan tambahkan kod berikut: autocomplete.php 的文件并添加以下代码：

<?php
// 获取查询字符串
$query = $_GET['query'];

// 连接到数据库
$conn = new mysqli("localhost", "my_user", "my_password", "my_db");

// 准备 SQL 查询
$stmt = $conn->prepare("SELECT suggestion FROM suggestions WHERE suggestion LIKE ?");

// 绑定查询参数
$stmt->bind_param("s", "%$query%");

// 执行查询
$stmt->execute();

// 获取结果
$result = $stmt->get_result();

// 逐行读取结果并将其转换为 JSON
$suggestions = array();
while ($row = $result->fetch_assoc()) {
    $suggestions[] = $row['suggestion'];
}
$json = json_encode($suggestions);

// 返回 JSON 响应
header("Content-Type: application/json");
echo $json;
?>

客户端脚本

接下来，我们需要一个客户端脚本来发送 Ajax 请求并显示建议。创建一个名为 autocomplete.js 的文件并添加以下代码：

// 获取搜索输入元素
const searchInput = document.getElementById("search-input");

// 添加事件监听器以在按键盘键时触发
searchInput.addEventListener("keyup", function(event) {
    // 获取查询字符串
    const query = searchInput.value;

    // 如果查询字符串为空，则显示建议
    if (query.length > 0) {
        // 创建 Ajax 请求
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "autocomplete.php?query=" + query, true);
        xhr.onload = function() {
            // 解析 JSON 响应
            const suggestions = JSON.parse(xhr.responseText);

            // 显示建议
            // ... (由你实现)
        };
        xhr.send();
    }
});

实战案例

为了使用自动完成建议引擎，你可以在 HTML 页面中包含上述脚本文件并为 search-input 元素添加标识符。在 autocomplete.php 脚本中，你需要将数据库连接参数更改为与你的数据库设置匹配。

运行引擎

将 autocomplete.php 和 autocomplete.js 文件上传到你的服务器。访问包含 search-inputrrreee

🎜Skrip sisi pelanggan🎜🎜🎜Seterusnya, kami memerlukan skrip sisi klien untuk menghantar permintaan Ajax dan memaparkan cadangan. Buat fail bernama autocomplete.js dan tambahkan kod berikut: 🎜rrreee🎜🎜Contoh praktikal🎜🎜🎜Untuk menggunakan enjin cadangan autolengkap, anda boleh memasukkan fail skrip di atas dalam halaman HTML anda dan sediakan elemen search-input menambah pengecam. Dalam skrip autocomplete.php, anda perlu menukar parameter sambungan pangkalan data untuk memadankan tetapan pangkalan data anda. 🎜🎜🎜Jalankan Enjin🎜🎜🎜Muat naik fail autocomplete.php dan autocomplete.js ke pelayan anda. Lawati halaman HTML yang mengandungi elemen search-input dan mula memasukkan rentetan pertanyaan. Anda seharusnya melihat cadangan yang sepadan dengan pertanyaan anda. 🎜

Atas ialah kandungan terperinci PHP dan Ajax: Membina enjin cadangan autolengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!