PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique

Créez un moteur de suggestions de saisie semi-automatique en utilisant PHP et Ajax : Script côté serveur : gère les requêtes Ajax et renvoie des suggestions (autocomplete.php). Script client : envoyer des requêtes Ajax et afficher des suggestions (autocomplete.js). Exemple pratique : incluez un script dans une page HTML et spécifiez l'identifiant de l'élément d'entrée de recherche.

PHP avec Ajax : Créer un moteur de suggestions de saisie semi-automatique

Introduction

Un moteur de suggestions de saisie semi-automatique est un outil utile qui aide les utilisateurs à trouver des suggestions dans les champs de saisie. Il est couramment utilisé dans les champs de recherche, les champs d'adresse et d'autres zones de saisie de texte. Cet article vous guidera dans la création d'un moteur de suggestion de saisie semi-automatique à l'aide de PHP et Ajax.

Server Side Script

Tout d'abord, nous avons besoin d'un script PHP pour gérer la requête Ajax et renvoyer des suggestions. Créez un fichier appelé autocomplete.php et ajoutez le code suivant : 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

🎜Script côté client🎜🎜🎜Ensuite, nous avons besoin d'un script côté client pour envoyer la requête Ajax et afficher les suggestions. Créez un fichier appelé autocomplete.js et ajoutez le code suivant : 🎜rrreee🎜🎜Exemple pratique🎜🎜🎜Afin d'utiliser le moteur de suggestion de saisie semi-automatique, vous pouvez inclure le fichier de script ci-dessus dans votre page HTML et provide search-input ajoute un identifiant. Dans le script autocomplete.php, vous devez modifier les paramètres de connexion à la base de données pour qu'ils correspondent aux paramètres de votre base de données. 🎜🎜🎜Run Engine🎜🎜🎜Téléchargez les fichiers autocomplete.php et autocomplete.js sur votre serveur. Visitez une page HTML contenant un élément search-input et commencez à saisir une chaîne de requête. Vous devriez voir des suggestions qui correspondent à votre requête. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!