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

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

示例代码

客户端：

1. <script>   
2.  
3.     $(document).ready(function(){   
4.  
5.         var xhr=null;   
6.  
7.         $('input[name="keyword"]').keyup(function() {   
8.  
9.               if(xhr){   
10.  
11.                   xhr.abort();//如果存在ajax的请求，就放弃请求   
12.  
13.               }   
14.  
15.             var inputText= $.trim(this.value);   
16.  
17.             if(inputText!=""){//检测键盘输入的内容是否为空，为空就不发出请求   
18.  
19.             xhr=$.ajax({   
20.  
21.                 type: 'GET',   
22.  
23.                 url: 'service/suggestion.php',   
24.  
25.                 cache:false,//不从浏览器缓存中加载请求信息   
26.  
27.                 data: "keyword=" + inputText,//向服务器端发送的数据   
28.  
29.                 dataType: 'json',//服务器返回数据的类型为json   
30.  
31.                 success: function (json) {   
32.  
33.                     if (json.length != 0) {//检测返回的结果是否为空   
34.  
35.                         var lists = "<ul>";   
36.  
37.                         $.each(json, function () {   
38.  
39.                             lists += "<li>"+this.pd_name+"</li>";//遍历出每一条返回的数据   
40.  
41.                         });   
42.  
43.                         lists+="</ul>";   
44.  
45.     
46.  
47.                         $("#searchBox").html(lists).show();//将搜索到的结果展示出来   
48.  
49.     
50.  
51.                         $("li").click(function(){   
52.  
53.                             $("#keyword").val($(this).text());//点击某个li就会获取当前的值   
54.  
55.                             $("#searchBox").hide();   
56.  
57.                         })   
58.  
59.     
60.  
61.                     } else {   
62.  
63.                         $("#searchBox").hide();   
64.  
65.                     }   
66.  
67.     
68.  
69.     
70.  
71.                 }   
72.  
73.     
74.  
75.             });   
76.  
77.             }else{   
78.  
79.                 $("#searchBox").hide();//没有查询结果就隐藏搜索框   
80.  
81.             }   
82.  
83.         }).blur(function(){   
84.  
85.             $("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框   
86.  
87.         });   
88.  
89.     
90.  
91.     });   
92.  
93. </script> 

服务端：

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

Tags: PHP搜索提示 AJAX搜索提示

分享到：