PHP combiné avec AJAX pour implémenter la fonction d'invite de recherche

PHP combiné avec AJAX pour implémenter la fonction d'invite de recherche

Créez d'abord une zone de saisie, puis écoutez l'événement keyup de la zone de saisie ; lorsque l'événement est déclenché, utilisez la requête AJAX pour envoyer le contenu d'entrée à PHP ; puis PHP recherche les données en fonction du contenu d'entrée et les renvoie enfin, les données renvoyées sont restituées ;

Exemple de code

Client :

<script>  
    $(document).ready(function(){  
        var xhr=null;  
        $(&#39;input[name="keyword"]&#39;).keyup(function() {  
              if(xhr){  
                  xhr.abort();//如果存在ajax的请求，就放弃请求  
              }  
            var inputText= $.trim(this.value);  
            if(inputText!=""){//检测键盘输入的内容是否为空，为空就不发出请求  
            xhr=$.ajax({  
                type: &#39;GET&#39;,  
                url: &#39;service/suggestion.php&#39;,  
                cache:false,//不从浏览器缓存中加载请求信息  
                data: "keyword=" + inputText,//向服务器端发送的数据  
                dataType: &#39;json&#39;,//服务器返回数据的类型为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>

Serveur :

<?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(&#39;数据库连接失败&#39;);  
}  
    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[&#39;keyword&#39;];//获取输入框的内容  
  
$suggestion=test($keyword);  
  
echo json_encode($suggestion);//输出查询的结果（json格式输出）  
  
?>

Tutoriel recommandé : "Tutoriel PHP"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!