PHP combined with AJAX to implement search prompt function

PHP combined with AJAX to implement the search prompt function

First create an input box; then listen to the keyup event of the input box, when the event is triggered , use AJAX request to send the input content to PHP; then PHP searches for data based on the input content and returns it; finally, the returned data is rendered.

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

Server :

<?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格式输出）  
  
?>

Recommended tutorial: "PHP Tutorial"

The above is the detailed content of PHP combined with AJAX to implement search prompt function. For more information, please follow other related articles on the PHP Chinese website!