站长图库

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

 发布时间 2020-05-20 20:52:15 热度 88

 Tag标签:  AJAX搜索提示

PHP结合AJAX实现搜索提示功能,有时候我们需要为搜索框加上自动完成功能,也就是搜索提示。


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


方法如下:

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


JS代码:

$(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();//输入框失去焦点的时候就隐藏搜索框
    });
});

服务端:

<?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结合AJAX实现搜索提示功能的详细内容,具体应用到项目中还需要跟母实际情况改写,这里仅仅一共一种思路。大家可以根据以上方法进行拓展!



评论(0)条

    站长图库

    站长素材 - 建站资源分享平台

    猜你喜欢
    音乐场景美女插画矢量素材下载(四)

    音乐场景美女插画矢量素材下载(四)

    背景素材 102 2020-03-03

    音乐场景美女插画矢量素材,适用于音乐海报背景设计矢量素材下载。

    Thinkphp最新打赏观看视频平台网站源码

    Thinkphp最新打赏观看视频平台网站源码

    其他源码 1956 2018-10-19

    可以添加外链,新增全新播放器。全新视频列表功能微信无需公众号2018年8月更新:优化整体核心框架,新增添加视频连接功能,...

    多版本投票系统V1.9.10全开源解密版,已知BUG问题修复

    多版本投票系统V1.9.10全开源解密版,已知BUG问题修复

    微信源码 599 2019-04-24

    多版本投票系统是一款基于微信端开发的微信投票活动模块,可以说是很流行的钻石投票打赏版,是一个不同版本投票系统的组合版本,...

    PHP彩虹代刷5.1网站源码 全解密破解版+自适应手机+多接口支付

    PHP彩虹代刷5.1网站源码 全解密破解版+自适应手机+多接口支付

    其他源码 1189 2019-03-11

    PHP彩虹代刷5.1网站源码全解密破解版+自适应手机+多接口支付,彩虹自助下单系统源码下载更新说明:V5.11、修复同系...