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教程》

以上就是PHP结合AJAX实现搜索提示功能的详细内容，更多请关注Gxlcms其它相关文章！

查看更多关于PHP结合AJAX实现搜索提示功能的详细内容...