php实现类似百度搜索功能的方法:1、创建html文件,并设置js代码为“$(function() {$( "#tags" ).autocomplete({...})”;2、通过php连接数据库,并通过“function test($keyword) {...}”方法实现输入框搜索功能即可。

本教程操作环境:Windows10系统、PHP8.1版、DELL G3电脑
php怎么实现类似百度搜索功能?
PHP实现类似百度搜索自动完成(代码简单)
一、效果图:

二、HTML代码
<meta>
<title>jQuery UI 自动完成(Autocomplete) - 默认功能</title>
<link>
<script></script>
<script></script>
<script>
$(function() {
$( "#tags" ).autocomplete({
// source: availableTags
source: "at.php"
});
});
</script>
<div>
<label>标签:</label>
<input>
</div>
三、PHP代码
<?php function test($keyword)
{
//连接数据库
$dsn = "mysql:dbname=test;host=localhost;";
$db = new PDO($dsn, 'root', 'root');
//查询数据
$result = $db->prepare("select title from article where title like :title");
$result->execute(array('title' => "%" . $keyword . "%"));
$data = $result->fetchall(PDO::FETCH_ASSOC);
//将二维数组转化为一维数组(自动补全插件要求的是一个一维数组)
foreach ($data as $k => $v) {
$datas[] = $v['title'];
}
return $datas;
}
//获取输入框的内容
//注:jquery-ui的自动补全ajax 当我们输入一个c时,Autocomplete实际发送的请求路径为at.php?term=c
$keyword = $_GET['term'];
//根据用户输入值查询相关数据
$data = test($keyword);
//输出json字符串
echo json_encode($data); //输出查询的结果(json格式输出)
?>
备注:HTML部分引入的css,js源代码:
<!-- 引入jQuery UI的css文件 --> <link><!-- 引入jQuery的js文件 --><script></script><!-- 引入jQuery UI的js文件 --><script></script>
文章参考:http://www.365mini.com/page/jquery-ui-autocomplete.htm
更多功能可参考: http://www.runoob.com/jqueryui/example-autocomplete.html
总结:以上是结合mysql 和 jquery-ui实现的自动提示,实际上如果数据库数据量较大的情况,整体对数据库开销也比较大。
这样,也可以尝试使用全文检索工具 xunsearch 或 sphinx 来实现。好处是减少了mysql数据库的查询压力,提高了检索速度。
推荐学习:《PHP视频教程》
php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!











