PHP MySQL Ajax 实时搜索

在本教程中，您将学习如何使用PHP和Ajax创建实时MySQL数据库搜索功能。

Ajax实时数据库搜索

您可以使用Ajax和PHP创建简单的实时数据库搜索功能，当您在搜索输入框中开始键入某些字符时，将显示搜索结果。

在本教程中，我们将创建一个实时搜索框，该搜索框将搜索countries表并异步显示结果。但是，首先我们需要创建该表。

步骤1：创建数据库表

执行以下SQL查询以在MySQL数据库中创建countries表。

示例

CREATE TABLE countries (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL
);

创建表后，您需要使用SQL INSERT语句填充一些数据。

如果不熟悉创建表的步骤，请查看有关SQL CREATE TABLE语句的教程，以获取有关在MySQL数据库系统中创建表的语法的详细信息。

步骤2：建立搜索表单

现在，让我们创建一个简单的Web界面，该界面允许用户实时搜索“countries”表中可用的国家/地区名称，就像自动填充或预先输入一样。

创建一个名为“ search-form.php”的PHP文件，并将以下代码放入其中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP MySQL 数据库实时搜索</title>
<style type="text/css">
    body{
        font-family: Arail, sans-serif;
    }
    /*设置搜索框的样式 */
    .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /*更改时获取输入值 */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                //在浏览器中显示返回的数据
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    
    //单击结果项时设置搜索输入值
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>

    <div class="search-box">
        <input type="text" autocomplete="off" placeholder="Search country..." />
        <div class="result"></div>
    </div>

</html>

每次更改搜索输入的内容或在搜索输入上发生键入事件时，jQuery代码将Ajax请求发送至“ backend-search.php”文件，该文件从与国家/地区相关的countries表中检索记录搜索的字词。这些记录稍后将由jQuery插入到<div>并显示在浏览器中。

步骤3：在后端处理搜索查询

这是我们的“ backend-search.php”文件的源代码，该文件根据Ajax请求发送的查询字符串搜索数据库并将结果发送回浏览器。

在线示例：面向过程方式

<?php
/* 尝试MySQL服务器连接。 假设您正在运行MySQL
具有默认设置的服务器（用户“ root”，无密码） */
$link = mysqli_connect("localhost", "root", "", "demo");
 
//检查连接
if($link === false){
    die("错误：无法连接。 " . mysqli_connect_error());
}
 
if(isset($_REQUEST["term"])){
    //预处理select语句
    $sql = "SELECT * FROM countries WHERE name LIKE ?";
    
    if($stmt = mysqli_prepare($link, $sql)){
        //将变量作为参数绑定到预处理语句
        mysqli_stmt_bind_param($stmt, "s", $param_term);
        
        //设置参数
        $param_term = $_REQUEST["term"] . '%';
        
        // Attempt to执行预处理语句
        if(mysqli_stmt_execute($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            
            //检查结果集中的行数
            if(mysqli_num_rows($result) > 0){
                //获取结果行作为关联数组
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>没有找到匹配的记录</p>";
            }
        } else{
            echo "错误：无法执行 $sql. " . mysqli_error($link);
        }
    }
     
    //结束语句
    mysqli_stmt_close($stmt);
}
 
//关闭连接
mysqli_close($link);
?>

在线示例：面向对象方式

<?php
/* 尝试MySQL服务器连接。 假设您正在运行MySQL
具有默认设置的服务器（用户“ root”，无密码） */
$mysqli = new mysqli("localhost", "root", "", "demo");
 
//检查连接
if($mysqli === false){
    die("错误：无法连接。 " . $mysqli->connect_error);
}
 
if(isset($_REQUEST["term"])){
    //select预处理语句
    $sql = "SELECT * FROM countries WHERE name LIKE ?";
    
    if($stmt = $mysqli->prepare($sql)){
        //将变量作为参数绑定到预处理语句
        $stmt->bind_param("s", $param_term);
        
        //设置参数
        $param_term = $_REQUEST["term"] . '%';
        
        // 尝试执行预处理语句
        if($stmt->execute()){
            $result = $stmt->get_result();
            
            //检查结果集中的行数
            if($result->num_rows > 0){
                //获取结果行作为关联数组
                while($row = $result->fetch_array(MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>没有找到匹配的记录</p>";
            }
        } else{
            echo "错误：无法执行 $sql. " . mysqli_error($link);
        }
    }
     
    //结束语句
    $stmt->close();
}
 
//关闭连接
$mysqli->close();
?>

在线示例：PDO方式

<?php
/* 尝试MySQL服务器连接。 假设您正在运行MySQL
具有默认设置的服务器（用户“ root”，无密码） */
try{
    $pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
    //将PDO错误模式设置为异常
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
    die("错误：无法连接。 " . $e->getMessage());
}
 
//尝试执行搜索查询
try{
    if(isset($_REQUEST["term"])){
        //创建预处理语句
        $sql = "SELECT * FROM countries WHERE name LIKE :term";
        $stmt = $pdo->prepare($sql);
        $term = $_REQUEST["term"] . '%';
        //绑定参数到语句
        $stmt->bindParam(":term", $term);
        //执行预处理语句
        $stmt->execute();
        if($stmt->rowCount() > 0){
            while($row = $stmt->fetch()){
                echo "<p>" . $row["name"] . "</p>";
            }
        } else{
            echo "<p>没有找到匹配的记录</p>";
        }
    }  
} catch(PDOException $e){
    die("错误：无法执行 $sql. " . $e->getMessage());
}
 
//结束语句
unset($stmt);
 
//关闭连接
unset($pdo);
?>

SQL SELECT语句与LIKE运算符结合使用，以在countries数据库表中查找匹配的记录。我们实现了预处理语句，以提高搜索性能并防止SQL注入攻击。

注意：在SQL语句中使用用户输入之前，请始终对其进行过滤和验证。您还可以使用PHP mysqli_real_escape_string()函数来转义用户输入中的特殊字符，并创建合法的SQL字符串以防止SQL注入。