您现在的位置是:首页 > IT分类 > PHP网站首页PHPPHP结合AJAX实现搜索提示功能

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

  • 蓝天
  • PHP
  • 2020-05-23 12:04:23
简介监听输入框的keyup事件,当事件触发时,使用AJAX请求将输入的内容发送给PHP;接着PHP根据输入的内容进行数据查找并返回;最后将返回的数据进行渲染即可。
客户端:<script> $(do
监听输入框的keyup事件,当事件触发时,使用AJAX请求将输入的内容发送给PHP;接着PHP根据输入的内容进行数据查找并返回;最后将返回的数据进行渲染即可。ieF蓝天个人博客-一个自学的好博客
客户端:
<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格式输出)  

?>
以上来源于:https://www.php.cn/php-weizijiaocheng-449627.html

转载: 感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.along168.cn”。

文章评论

联系方式