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 语句 用一些数据填充它。或者，你可以通过单击下载按钮下载预填充国家/地区表，然后将其导入 MySQL 数据库。
有关在 MySQL 数据库系统中创建表的语法的详细信息，请查看 SQL CREATE TABLE 语句 教程。
第 2 步：创建搜索表单
现在，让我们创建一个简单的 Web 界面，允许用户实时搜索我们国家/地区表中可用国家/地区的名称，就像自动填充或预先输入一样。
创建一个名为 search-form.php 的 PHP 文件，并在其中放入以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.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(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("backend-search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
<input type="text" autocomplete="off" placeholder="Search country..." />
</body>
</html>
每次更改搜索输入的内容或在搜索输入上发生键盘事件时，jQuery 代码（第 47 行至第 67 行）向 backend-search.php 文件发送 Ajax 请求，该文件从与 countries 相关的表中检索记录。搜索到的术语。稍后这些记录将通过 jQuery 插入到 <div>中并显示在浏览器上。
第 3 步：在后端处理搜索查询
这是我们的 backend-search.php 文件的源代码，它根据 Ajax 请求发送的查询字符串搜索数据库，并将结果发送回浏览器。
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "", "demo");
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
if(isset($_REQUEST["term"])){
// Prepare a select statement
$sql = "SELECT * FROM countries WHERE name LIKE ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_term);
// Set parameters
$param_term = $_REQUEST["term"] . '%';
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
$result = mysqli_stmt_get_result($stmt);
// Check number of rows in the result set
if(mysqli_num_rows($result) > 0){
// Fetch result rows as an associative array
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>No matches found</p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}
// Close statement
mysqli_stmt_close($stmt);
}
// close connection
mysqli_close($link);
?>
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$mysqli = new mysqli("localhost", "root", "", "demo");
// Check connection
if($mysqli === false){
die("ERROR: Could not connect. " . $mysqli->connect_error);
}
if(isset($_REQUEST["term"])){
// Prepare a select statement
$sql = "SELECT * FROM countries WHERE name LIKE ?";
if($stmt = $mysqli->prepare($sql)){
// Bind variables to the prepared statement as parameters
$stmt->bind_param("s", $param_term);
// Set parameters
$param_term = $_REQUEST["term"] . '%';
// Attempt to execute the prepared statement
if($stmt->execute()){
$result = $stmt->get_result();
// Check number of rows in the result set
if($result->num_rows > 0){
// Fetch result rows as an associative array
while($row = $result->fetch_array(MYSQLI_ASSOC)){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>No matches found</p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}
// Close statement
$stmt->close();
}
// Close connection
$mysqli->close();
?>
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try{
$pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
// Set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("ERROR: Could not connect. " . $e->getMessage());
}
// Attempt search query execution
try{
if(isset($_REQUEST["term"])){
// create prepared statement
$sql = "SELECT * FROM countries WHERE name LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST["term"] . '%';
// bind parameters to statement
$stmt->bindParam(":term", $term);
// execute the prepared statement
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>No matches found</p>";
}
}
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
// Close statement
unset($stmt);
// Close connection
unset($pdo);
?>
SQL SELECT 语句与运算符LIKE（第 16 行） 结合使用，以查找 countries 数据库表中的匹配记录。我们已经实现了预处理语句以获得更好的搜索性能以及防止 SQL 注入 攻击。
注意： 在 SQL 语句中使用之前，请始终过滤并验证用户输入。你还可以使用 PHP mysqli_real_escape_string() 函数来转义用户输入中的特殊字符，并创建合法的 SQL 字符串以防止 SQL 注入。