在php中使用ajax過濾和搜索列表

Question

<div id="one"> 
    <label for="default">Without Ajax</label> 
    <input type="text" id="default" list="lang" placeholder="Select"> 

    <datalist id="lang"> 
    <option value="English"> 
    <option value="German"> 
    <option value="French"> 

    </option> 

</datalist> 
</div> 

如何使用php將此編碼轉換爲ajax。當我按下文本上的一個鍵時，我必須在列表中找到匹配並顯示文本中的所有匹配。

Answer 1

我假設你已經知道如何使用Php從mysql數據庫檢索數據。以及使用Jquery的基本知識。

，你需要做的第一件事是導入jQuery庫：

<script type="text/javascript" src="../js/jq.js"></script> 

然後創建一個輸入框。當用戶將輸入他的問題：

<input type="text" id="inp" name="inp"/></span> 

然後創建稍後我們將用它來顯示結果的DIV：

<div class="results"></div> 

聲明你的項目的頭部另一個腳本：

<script type="text/javascript"> 

</script> 

在您剛創建的新腳本中。聲明一個函數來監聽keyup事件。

$(function(){ 

    $(#inp).keyup(function(){ 

    }); 

}); 

這是發生了什麼事。您聲明的函數將監視輸入框中具有id'inp'的所有更改。每次你敲擊鍵盤上的任何鍵時。將在該事件內執行的動作將被執行。

內部的密碼功能。聲明一個變量來存儲輸入框中輸入的值。 （）＃var inpvalue = $（'＃inp'）。val（）;

接下來你需要做的是聲明另一個jquery函數。這是本教程中最重要的部分，因爲這將是真正從數據庫獲取值的人。

然後，您現在要做的就是通過使用類結果更改div的html屬性來顯示查詢結果。而參數是從AJAX功能獲取的數據：

$(function(){ 
      $('#inp').keyup(function(){ 

      var inpval=$('#inp').val(); 

      $.ajax({ 
       type: 'POST', 
       data: ({p : inpval}), 
       url: 'listercust.php', 
       success: function(data) { 
        $('.result').html(data); 

      } 
     }); 
    }); 
}); 

PHP文件

，你需要做的第一件事是聲明連接到數據庫所需的所有連接。我不會在這裏討論它，因爲它是基礎知識之一。

聲明一個php變量，它將從您之前創建的ajax函數接收值。請記住，參數'p'應該匹配你在ajax函數上聲明的值。

$name=$_POST['p']; 

的這部分功能：

所有你現在要做的就是讓這將使用由用戶輸入的數據的查詢：

然後顯示獲取值：

while（$ row = mysql_fetch_assoc（$ query））{ $ row ['name']; }

你可以決定你的php文件應該如何以及如何通過與我的sql通信來返回來自php的數據。

希望得到這個幫助。