PHP 및 Ajax: 자동 완성 제안 엔진 구축

PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버 측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 예: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.

Ajax를 사용한 PHP: 자동 완성 제안 엔진 구축

소개

자동 완성 제안 엔진은 사용자가 입력 필드에서 제안을 찾는 데 도움이 되는 유용한 도구입니다. 검색 필드, 주소 필드 및 기타 텍스트 입력 영역에서 일반적으로 사용됩니다. 이 기사에서는 PHP와 Ajax를 사용하여 자동 완성 제안 엔진을 구축하는 과정을 안내합니다.

서버 측 스크립트

먼저 Ajax 요청 및 반환 제안을 처리하려면 PHP 스크립트가 필요합니다. autocomplete.php라는 파일을 만들고 다음 코드를 추가합니다: 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

🎜클라이언트 측 스크립트🎜🎜🎜다음으로 Ajax 요청을 보내고 제안을 표시하기 위한 클라이언트 측 스크립트가 필요합니다. autocomplete.js라는 파일을 만들고 다음 코드를 추가합니다. 🎜rrreee🎜🎜실용 예🎜🎜🎜자동 완성 제안 엔진을 사용하려면 HTML 페이지에 위 스크립트 파일을 포함하고 검색 입력 요소를 제공하면 식별자를 추가합니다. autocomplete.php 스크립트에서 데이터베이스 설정과 일치하도록 데이터베이스 연결 매개변수를 변경해야 합니다. 🎜🎜🎜Run Engine🎜🎜🎜 autocomplete.php 및 autocomplete.js 파일을 서버에 업로드하세요. search-input 요소가 포함된 HTML 페이지를 방문하여 쿼리 문자열 입력을 시작하세요. 쿼리와 일치하는 제안이 표시됩니다. 🎜

위 내용은 PHP 및 Ajax: 자동 완성 제안 엔진 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!