【摘要】 对于初入门的php学习者肯定会有很多问题，今天考比过小编为大家整理了关于【技术产品】PHP结合AJAX实现搜索提示功能的信息，希望可以帮助到大家。下面就让我们一起来看下【技术产品】PHP结合AJAX实现搜索提示功能的具体内容吧！
PHP结合AJAX实现搜索提示功能
首先将创建一个输入框；然后监听输入框的keyup事件，当事件触发时，使用AJAX请求将输入的内容发送给PHP；接着PHP根据输入的内容进行数据查找并返回；最后将返回的数据进行渲染即可。
示例代码
客户端：
<script>
$(document).ready(function(){
var xhr=null;
$('input[name="keyword"]').keyup(function() {
if(xhr){
xhr.abort();//如果存在ajax的请求，就放弃请求
}
var inputText= $.trim(this.value);
if(inputText!=""){//检测键盘输入的内容是否为空，为空就不发出请求
xhr=$.ajax({
type: 'GET',
url: 'service/suggestion.php',
cache:false,//不从浏览器缓存中加载请求信息
data: "keyword=" + inputText,//向服务器端发送的数据
dataType: 'json',//服务器返回数据的类型为json
success: function (json) {
if (json.length != 0) {//检测返回的结果是否为空
var lists = "<ul>";
$.each(json, function () {
lists += "<li>"+this.pd_name+"</li>";//遍历出每一条返回的数据
});
lists+="</ul>";
$("#searchBox").html(lists).show();//将搜索到的结果展示出来
$("li").click(function(){
$("#keyword").val($(this).text());//点击某个li就会获取当前的值
$("#searchBox").hide();
})
} else {
$("#searchBox").hide();
}
}
});
}else{
$("#searchBox").hide();//没有查询结果就隐藏搜索框
}
}).blur(function(){
$("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框
});
});
</script>服务端：
<?php
session_start();
function connectDb(){//连接数据库的函数
$db_server="localhost";
$db_name="test";//数据库的名称
$db_user="root";//数据库的用户名，不同的用户权限不同
$db_pwd="";//数据库的密码
$dsn="mysql:host=$db_server;dbname=$db_name;charset=utf8";//使用PDO的方法连接数据库
try{
$connect=new PDO($dsn,$db_user,$db_pwd,array(PDO::ATTR_PERSISTENT=>true));//如果需要数据库长连接，需要最后加一个参数
}
catch(PDOException $e){
exit('数据库连接失败');
}
return $connect;
}
function test($keyword){//从数据库中查找关键字的函数
$db=connectDb();
$result=$db->prepare("select 字段名 from 数据库名字 where 字段名 like ?");
$result->bindParam(1,$keyword);//第一个问号的值
$result=>execute;
return $result->fetchAll(PDO::FETCH_ASSOC);
}
$keyword=$_GET['keyword'];//获取输入框的内容
$suggestion=test($keyword);
echo json_encode($suggestion);//输出查询的结果（json格式输出）
?> 以上就是考比过小编为大家整理的【技术产品】PHP结合AJAX实现搜索提示功能内容，希望可以帮助到你，如果你还有更多关于php的问题，请持续关注考比过php频道，小编会持续为大家分享关于php方面的知识！