PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine

Erstellen Sie eine Autocomplete-Vorschlags-Engine mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfragen senden und Vorschläge anzeigen (autocomplete.js). Praktisches Beispiel: Fügen Sie ein Skript in eine HTML-Seite ein und geben Sie den Bezeichner des Sucheingabeelements an.

PHP mit Ajax: Erstellen einer Autocomplete-Vorschlags-Engine

Einführung

Eine Autocomplete-Vorschlags-Engine ist ein nützliches Tool, das Benutzern hilft, Vorschläge in Eingabefeldern zu finden. Es wird häufig in Suchfeldern, Adressfeldern und anderen Texteingabebereichen verwendet. Dieser Artikel führt Sie durch den Aufbau einer Autocomplete-Vorschlags-Engine mit PHP und Ajax.

Serverseitiges Skript

Zuerst benötigen wir ein PHP-Skript, um die Ajax-Anfrage zu verarbeiten und Vorschläge zurückzugeben. Erstellen Sie eine Datei mit dem Namen autocomplete.php und fügen Sie den folgenden Code hinzu: 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

🎜Clientseitiges Skript🎜🎜🎜Als nächstes benötigen wir ein clientseitiges Skript, um die Ajax-Anfrage zu senden und die Vorschläge anzuzeigen. Erstellen Sie eine Datei mit dem Namen autocomplete.js und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜🎜Praktisches Beispiel🎜🎜🎜Um die Autocomplete-Vorschlags-Engine zu verwenden, können Sie die obige Skriptdatei in Ihre HTML-Seite einbinden und Provide search-input fügt einen Bezeichner hinzu. Im Skript autocomplete.php müssen Sie die Datenbankverbindungsparameter ändern, damit sie Ihren Datenbankeinstellungen entsprechen. 🎜🎜🎜Run Engine🎜🎜🎜Laden Sie die Dateien autocomplete.php und autocomplete.js auf Ihren Server hoch. Besuchen Sie eine HTML-Seite, die ein search-input-Element enthält, und beginnen Sie mit der Eingabe einer Abfragezeichenfolge. Es sollten Vorschläge angezeigt werden, die Ihrer Anfrage entsprechen. 🎜

Das obige ist der detaillierte Inhalt vonPHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!