使用jquery+ajax+php实现搜索框的功能

我们每天浏览网页都能见到搜索框

搜索框的原理：

客户端：输入要搜索的关键字于文本框，然后文本框将关键字获取，使用ajax发送请求到服务端，然后根据服务端返回来的信息显示到一个div中

服务端：接收传过来的数据，然后在数据库中搜索，再返回数据给客户端

首先是客户端

新建一个输入框

[html] view plain copy

print?

1. <input  type="text" id="keyword" name="keyword" />  

在输入框的下面创建一个div，先让他隐藏起来

[html] view plain copy

print?

1. <div id="searchBox" display: none"></div>  

注：搜索框的定位可以使用绝对定位，定在输入框的下面，搜索按钮可以加在输入框的旁边，同样也是使用绝对定位

接下来是使用jq发送ajax请求（这里使用的是json格式的数据）

[javascript] view plain copy

print?

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.   
24.                         $("#searchBox").html(lists).show();//将搜索到的结果展示出来  
25.   
26.                         $("li").click(function(){  
27.                             $("#keyword").val($(this).text());//点击某个li就会获取当前的值  
28.                             $("#searchBox").hide();  
29.                         })  
30.   
31.                     } else {  
32.                         $("#searchBox").hide();  
33.                     }  
34.   
35.   
36.                 }  
37.   
38.             });  
39.             }else{  
40.                 $("#searchBox").hide();//没有查询结果就隐藏搜索框  
41.             }  
42.         }).blur(function(){  
43.             $("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框  
44.         });  
45.   
46.     });  
47. </script>  

服务端使用php语句连接数据库，然后进行查询（这里使用的是PDO连接的方法）

[php] view plain copy

print?

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

注：服务端的函数最好写在别的页面，方便管理。

这样，搜索框的功能就能实现了。学习笔记，仅供参考~~