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'];

// 連接到數(shù)據(jù)庫
$conn = new mysqli("localhost", "my_user", "my_password", "my_db");

// 準備 SQL 查詢
$stmt = $conn->prepare("SELECT suggestion FROM suggestions WHERE suggestion LIKE ?");

// 綁定查詢參數(shù)
$stmt->bind_param("s", "%$query%");

// 執(zhí)行查詢
$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");

// 添加事件監(jiān)聽器以在按鍵盤鍵時觸發(fā)
searchInput.addEventListener("keyup", function(event) {
    // 獲取查詢字符串
    const query = searchInput.value;

    // 如果查詢字符串為空，則顯示建議
    if (query.length > 0) {
        // 創(chuàng)建 Ajax 請求
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "autocomplete.php?query=" + query, true);
        xhr.onload = function() {
            // 解析 JSON 響應
            const suggestions = JSON.parse(xhr.responseText);

            // 顯示建議
            // ... (由你實現(xiàn))
        };
        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!