PHP 实例 - AJAX 实时搜索
PHP 实例 - AJAX 实时搜索
在我们的网站中，搜索功能十分重要。为了更好的用户体验，我们可以采用实时搜索的方式，用户输入关键字时，搜索结果就会自动更新且不需要点击提交按钮。这里就是一个 PHP 实例 - AJAX 实时搜索的实现方式，让我们来了解一下。
实现步骤
HTML 文件
我们先构建 HTML 文件。在需要显示结果的地方添加一个 div 标签，用于接收搜索结果。input 标签接受用户的输入并且触发 AJAX 请求。
<!DOCTYPE html>
<html>
<head>
<title>实时搜索</title>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="search" name="search" placeholder="请输入你要搜索的内容">
<div id="result"></div>
<script src="index.js"></script>
</body>
</html>
PHP 文件
我们使用 PHP 文件来编写搜索代码。由于这里没有使用数据库，因此我们需要先准备好用于测试的数据。我们可以使用一个数组来模拟数据。
$data = array(
array(
'name' => 'Tom',
'age' => 20,
'address' => '广东'
),
array(
'name' => 'Jerry',
'age' => 22,
'address' => '北京'
),
array(
'name' => 'Bob',
'age' => 19,
'address' => '上海'
),
array(
'name' => 'Lucy',
'age' => 25,
'address' => '湖南'
)
);
接下来就是搜索代码的实现。我们使用 PHP 的 array_filter 函数来过滤数据。通过传入一个回调函数来过滤数组中的元素。当 $keyword 为空时，返回全部数据。
function search($keyword, $data){
if(!empty($keyword)){
$data = array_filter($data, function ($item) use ($keyword){
if (stristr($item['name'], $keyword) != false) {
return true;
} else if (stristr($item['address'], $keyword) != false) {
return true;
}
return false;
});
}
return $data;
}
AJAX 请求
我们使用 AJAX 进行实时搜索。在这里，我们使用 jQuery 的 $.ajax() 函数，来发起一个 GET 请求。当用户输入时，我们会立即发送 AJAX 请求，搜索结果会在 result 标签下即时更新。
$(function(){
$('#search').on('input', function(){
var search = $(this).val();
$.ajax({
type: 'GET',
url: 'search.php',
data:{
keyword:search
},
dataType:'json',
success:function(res){
var html = '';
$.each(res, function(index, item){
html += '<p>'+ item.name +', ' +item.age+ '岁, 家在'+item.address+'</p>';
});
$('#result').html(html);
}
});
});
});
总结
AJAX 实时搜索可以显著的提高网站的用户体验，本例子可以作为你的项目的基础，来实现各种类型的搜索。需要注意的是，当数据量较大时，我们需要使用数据库来进行查询，这样可以减轻服务器的压力。