PHP结合AJAX实现搜索提示功能

首先将创建一个输入框；然后监听输入框的keyup事件，当事件触发时，使用AJAX请求将输入的内容发送给PHP；接着PHP根据输入的内容进行数据查找并返回；最后将返回的数据进行渲染即可。

示例代码

客户端：

1. <script>
2. $(document).ready(function(){
3. var xhr=null;
4. $('input[name="keyword"]').keyup(function() {
5. if(xhr){
6. xhr.abort();//如果存在ajax的请求，就放弃请求
7. }
8. var inputText= $.trim(this.value);
9. if(inputText!=""){//检测键盘输入的内容是否为空，为空就不发出请求
10. xhr=$.ajax({
11. type: 'GET',
12. url: 'service/suggestion.php',
13. cache:false,//不从浏览器缓存中加载请求信息
14. data: "keyword=" + inputText,//向服务器端发送的数据
15. dataType: 'json',//服务器返回数据的类型为json
16. success: function (json) {
17. if (json.length != 0) {//检测返回的结果是否为空
18. var lists = "<ul>";
19. $.each(json, function () {
20. lists += "<li>"+this.pd_name+"</li>";//遍历出每一条返回的数据
21. });
22. lists+="</ul>";
23. $("#searchBox").html(lists).show();//将搜索到的结果展示出来
24. $("li").click(function(){
25. $("#keyword").val($(this).text());//点击某个li就会获取当前的值
26. $("#searchBox").hide();
27. })
28. } else {
29. $("#searchBox").hide();
30. }
31. }
32. });
33. }else{
34. $("#searchBox").hide();//没有查询结果就隐藏搜索框
35. }
36. }).blur(function(){
37. $("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框
38. });
39. });
40. </script>

服务端：

1. <?php
2. session_start();
3. function connectDb(){//连接数据库的函数
4. $db_server="localhost";
5. $db_name="test";//数据库的名称
6. $db_user="root";//数据库的用户名，不同的用户权限不同
7. $db_pwd="";//数据库的密码
8. $dsn="mysql:host=$db_server;dbname=$db_name;charset=utf8";//使用PDO的方法连接数据库
9. try{
10. $connect=new PDO($dsn,$db_user,$db_pwd,array(PDO::ATTR_PERSISTENT=>true));//如果需要数据库长连接，需要最后加一个参数
11. }
12. catch(PDOException $e){
13. exit('数据库连接失败');
14. }
15. return $connect;
16. }
17. function test($keyword){//从数据库中查找关键字的函数
18. $db=connectDb();
19. $result=$db->prepare("select 字段名 from 数据库名字 where 字段名 like ?");
20. $result->bindParam(1,$keyword);//第一个问号的值
21. $result=>execute;
22. return $result->fetchAll(PDO::FETCH_ASSOC);
23. }
24. $keyword=$_GET['keyword'];//获取输入框的内容
25. $suggestion=test($keyword);
26. echo json_encode($suggestion);//输出查询的结果（json格式输出）
27. ?>