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

来源：凉官灰 发布时间：2020-05-25 10:01:31 阅读量：1808

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

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

示例代码

客户端：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<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>

服务端：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<?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 环境搭建
分享：
评论：
你还没有登录，请先

热门标签

热门文章

    推荐文章