PHP and Ajax: Building an autocomplete suggestion engine

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: Handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax requests and display suggestions (autocomplete.js). Practical example: Include a script in an HTML page and specify the search-input element identifier.

PHP and Ajax: Building an Autocomplete Suggestion Engine

Introduction

The autocomplete suggestion engine is a useful tool that helps users find suggestions in input fields. It is commonly used in search fields, address fields, and other text input areas. This article will guide you through building an autocomplete suggestion engine using PHP and Ajax.

Server Side Script

First, we need a PHP script to handle the Ajax request and return suggestions. Create a file called autocomplete.php and add the following code:

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

Client script

Next, we need a client Script to send Ajax requests and display suggestions. Create a file called autocomplete.js and add the following code:

// 获取搜索输入元素
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();
    }
});

practical case

In order to use the autocomplete suggestion engine, you can Include the above script file in an HTML page and add an identifier for the search-input element. In the autocomplete.php script, you need to change the database connection parameters to match your database settings.

Run Engine

Upload the autocomplete.php and autocomplete.js files to your server. Visit an HTML page containing the search-input element and start entering a query string. You should see suggestions that match your query.

The above is the detailed content of PHP and Ajax: Building an autocomplete suggestion engine. For more information, please follow other related articles on the PHP Chinese website!