php数据如何实现搜索提示功能_php数据Ajax实时搜索技术详解

<input type="text" id="searchInput" placeholder="请输入关键词..." />
<div id="suggestions"></div>

document.getElementById('searchInput').addEventListener('keyup', function() {
    let keyword = this.value.trim();
    if (keyword.length < 1) {
        document.getElementById('suggestions').innerHTML = '';
        return;
    }

    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'search.php?q=' + encodeURIComponent(keyword), true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('suggestions').innerHTML = xhr.responseText;
        }
    };
    xhr.send();
});

<?php
$host = 'localhost';
$db   = 'test_db';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (&#36;e) {
    die('数据库连接失败');
}

// 获取搜索关键词
&#36;q = &#36;_GET['q'] ?? '';
&#36;q = trim(&#36;q);

// 防止SQL注入，使用预处理语句
&#36;sql = "SELECT name FROM products WHERE name LIKE ? ORDER BY name LIMIT 10";
&#36;stmt = &#36;pdo->prepare(&#36;sql);
&#36;stmt->execute(['%' . &#36;q . '%']);

// 生成HTML建议项
if (&#36;stmt->rowCount() > 0) {
    while (&#36;row = &#36;stmt->fetch()) {
        echo "<div onclick='fill(\"" . htmlspecialchars(&#36;row['name']) . "\")'>" . htmlspecialchars(&#36;row['name']) . "</div>";
    }
} else {
    echo "<div class='no-result'>无匹配结果</div>";
}
?>

function fill(value) {
    document.getElementById('searchInput').value = value;
    document.getElementById('suggestions').innerHTML = '';
}