PHP AJAX实时搜索详解

17 阅读 0 评论 0 点赞

本节将介绍一个使用PHP和Ajax实现实时搜索功能的例子，当用户在搜索框输入时，页面无需刷新即可实时从XML文件中搜索并显示结果。

思路：1. 在test.html里准备一个搜索输入框和一个结果显示区域（div.result），通过oninput事件触发搜索函数searchXML()。2. searchXML()函数主要内容是：创建XMLHttpRequest对象，配置为GET请求，将搜索关键词发送到test.php。3. test.php处理请求，从dotcpp.xml文件中查找匹配的内容，返回HTML格式的搜索结果。

1. dotcpp.xml

<?xml version="1.0" encoding="UTF-8"?>
<dotcpp>
    <brand>Dotcpp编程</brand>
    <website>dotcpp.com</website>
    <course>PHP教程</course>
    <courses>
        <course id="1">PHP基础</course>
        <course id="2">PHP高级</course>
        <course id="3">PHP框架</course>
    </courses>
</dotcpp>

2. test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP Ajax XML实时搜索</title>
</head>
<body>
    <h2>Dotcpp XML实时搜索系统</h2>
     
    <p>输入搜索关键词：</p>
    <input type="text" id="search_input" placeholder="输入要搜索的内容" 
           oninput="searchXML()" style="width: 300px; padding: 8px;">
     
    <div id="result" style="width: 700px;"></div>
    
    <script>
    let searchTimer;
    
    function searchXML() {
        // 清除之前的定时器
        clearTimeout(searchTimer);
        
        // 获取搜索关键词
        let keyword = document.getElementById("search_input").value.trim();
        
        // 如果关键词为空，显示提示信息
        if (keyword === '') {
            document.getElementById("result").innerHTML = "请输入搜索关键词";
            return;
        }
        
        // 设置延迟搜索（防抖处理，避免频繁请求）
        searchTimer = setTimeout(function() {
            // 1. 创建XMLHttpRequest对象
            let xhr = new XMLHttpRequest();
             
            // 2. 配置请求
            xhr.open("GET", "test.php?keyword=" + encodeURIComponent(keyword), true);
             
            // 3. 定义响应处理函数
            xhr.onreadystatechange = function() {
                /*readystate==4&&status==200表示一个http请求已经成功完成！*/
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 更新页面显示结果
                    document.getElementById("result").innerHTML = xhr.responseText;
                }
            };
             
            // 4. 发送请求
            xhr.send();
        }, 300); // 300毫秒延迟
    }
    
    // 页面加载时显示所有数据
    window.onload = function() {
        // 清空搜索框，触发搜索（显示所有内容）
        document.getElementById("search_input").value = '';
        searchXML();
    };
    </script>
</body>
</html>

3. test.php

<?php
// 设置响应头，防止中文乱码
header('Content-Type: text/html; charset=utf-8');
// 获取搜索关键词
$keyword = isset($_GET['keyword']) ? trim($_GET['keyword']) : '';
// XML文件路径
$xmlFile = __DIR__.'/dotcpp.xml';
// 加载XML文件
$xml = simplexml_load_file($xmlFile);
if (!$xml) {
    echo "<div style='color: red;'>无法加载XML文件！</div>";
    exit;
}
// 开始构建搜索结果
$html = "<h3>搜索结果</h3>";
// 如果关键词为空，显示所有内容
if ($keyword === '') {
    $html .= "<div style='color: #666; margin-bottom: 10px;'>显示所有内容：</div>";
    
    // 显示品牌信息
    $html .= "<div style='margin: 10px 0; padding: 10px; background-color: #f5f5f5;'>";
    $html .= "<strong>品牌：</strong>" . htmlspecialchars((string)$xml->brand) . "<br>";
    $html .= "<strong>网站：</strong>" . htmlspecialchars((string)$xml->website) . "<br>";
    $html .= "<strong>主课程：</strong>" . htmlspecialchars((string)$xml->course);
    $html .= "</div>";
    
    // 显示课程列表
    $html .= "<h4>课程列表：</h4>";
    $html .= "<ul>";
    foreach ($xml->courses->course as $course) {
        $courseId = (string)$course['id'];
        $courseName = (string)$course;
        $html .= "<li><strong>ID: {$courseId}</strong> - {$courseName}</li>";
    }
    $html .= "</ul>";
} else {
    // 进行搜索
    $found = false;
    $html .= "<div style='color: #666; margin-bottom: 10px;'>搜索关键词：<strong>" . htmlspecialchars($keyword) . "</strong></div>";
    
    // 搜索品牌
    if (stripos((string)$xml->brand, $keyword) !== false) {
        $found = true;
        $html .= "<div style='margin: 10px 0; padding: 10px; background-color: #e8f5e9; border-left: 4px solid #4CAF50;'>";
        $html .= "<strong>匹配到品牌：</strong>" . htmlspecialchars((string)$xml->brand);
        $html .= "</div>";
    }
    
    // 搜索网站
    if (stripos((string)$xml->website, $keyword) !== false) {
        $found = true;
        $html .= "<div style='margin: 10px 0; padding: 10px; background-color: #e8f5e9; border-left: 4px solid #4CAF50;'>";
        $html .= "<strong>匹配到网站：</strong>" . htmlspecialchars((string)$xml->website);
        $html .= "</div>";
    }
    
    // 搜索主课程
    if (stripos((string)$xml->course, $keyword) !== false) {
        $found = true;
        $html .= "<div style='margin: 10px 0; padding: 10px; background-color: #e8f5e9; border-left: 4px solid #4CAF50;'>";
        $html .= "<strong>匹配到主课程：</strong>" . htmlspecialchars((string)$xml->course);
        $html .= "</div>";
    }
    
    // 搜索课程列表
    $matchedCourses = [];
    foreach ($xml->courses->course as $course) {
        $courseName = (string)$course;
        if (stripos($courseName, $keyword) !== false) {
            $found = true;
            $courseId = (string)$course['id'];
            $matchedCourses[] = [
                'id' => $courseId,
                'name' => $courseName
            ];
        }
    }
    
    // 显示匹配的课程
    if (!empty($matchedCourses)) {
        $html .= "<h4>匹配的课程：</h4>";
        $html .= "<ul>";
        foreach ($matchedCourses as $course) {
            // 高亮显示匹配的关键词
            $highlightedName = preg_replace(
                "/(" . preg_quote($keyword, '/') . ")/i",
                "<span style='background-color: yellow; font-weight: bold;'>$1</span>",
                htmlspecialchars($course['name'])
            );
            $html .= "<li><strong>ID: {$course['id']}</strong> - {$highlightedName}</li>";
        }
        $html .= "</ul>";
    }
    
    // 如果没有找到匹配项
    if (!$found) {
        $html .= "<div style='color: #999; padding: 20px; text-align: center;'>";
        $html .= "没有找到包含 \"" . htmlspecialchars($keyword) . "\" 的内容";
        $html .= "</div>";
    }
}
// 输出结果
echo $html;
?>

4. 效果演示

4.1 访问test.html：

PHP AJAX实时搜索