PHP結合AJAX實現搜尋提示功能

PHP結合AJAX實現搜尋提示功能

首先將建立一個輸入框；然後監聽輸入框的keyup事件，當事件觸發時，使用AJAX請求將輸入的內容傳送給PHP；接著PHP根據輸入的內容進行資料查詢並返回；最後將返回的資料進行渲染即可。

範例程式碼

用戶端：

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