使用jquery+ajax+php實現搜索框的功能

首先是客戶端

新建一個輸入框

<input  type="text" id="keyword" name="keyword" />  

 

在輸入框的下面創建一個div，先讓他隱藏起來

<div id="searchBox" display: none"></div>  

注：搜索框的定位可以使用絕對定位，定在輸入框的下面，搜索按鈕可以加在輸入框的旁邊，同樣也是使用絕對定位 

接下來是使用jq發送ajax請求（這里使用的是json格式的數據）

<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語句連接數據庫，然后進行查詢（這里使用的是PDO連接的方法）

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

注：服務端的函數最好寫在別的頁面，方便管理。

這樣，搜索框的功能就能實現了。學習筆記，僅供參考~~

該篇文章為轉載，