如何處理PHP表單中的自動填充和自動完成

如何處理PHP表單中的自動填充和自動完成

隨著互聯網的發展，人們越來越依賴自動填充和自動完成功能來簡化他們在網站上的操作。而在PHP表單中實現這些功能並不複雜，本文將簡要介紹如何使用PHP來處理表單的自動填充和自動完成。

在開始之前，我們需要先明確什麼是自動填入和自動完成。自動填入是指根據使用者先前的輸入或歷史記錄，自動為使用者填寫表單中的欄位。例如，當使用者輸入郵件地址時，根據使用者先前的輸入，自動填寫可能的郵件地址。而自動完成則是指在使用者輸入過程中，自動為其提供可能的選項。例如，當使用者輸入城市名時，自動顯示可能的城市名稱供使用者選擇。

首先，我們需要一個資料庫來儲存自動填入和自動完成的資料。我們以城市名為例，首先建立一個名為"city"的資料庫表格，其中包含一個名為"city_name"的字段，用於儲存城市名稱。

CREATE TABLE city (

city_name VARCHAR(255) NOT NULL

);

接下來，我們需要準備一些城市名的資料來填入資料庫。我們可以手動新增數據，或使用CSV檔案匯入。

INSERT INTO city (city_name) VALUES

('北京'),
('上海'),
('广州'),
('深圳'),
('杭州');

現在，我們準備好了資料庫和數據，可以開始處理表單了。首先，我們需要一個輸入框用於接收使用者的輸入。

要注意的是，我們把輸入框的自動完成屬性設定為"off"，以避免瀏覽器預設的自動完成功能幹擾我們的自動完成功能。

接下來，我們使用AJAX來實現自動填充和自動完成的功能。我們在輸入框內輸入文字後，透過AJAX來取得相符的城市名，並將其顯示在下拉清單中。

<script><br>$ (document).ready(function(){</script>

$('#city').keyup(function(){
    var query = $(this).val();
    if(query != ''){
        $.ajax({
            url:"fetch.php",
            method:"POST",
            data:{query:query},
            success:function(data){
                $('#cityList').fadeIn();
                $('#cityList').html(data);
            }
        });
    }
});
$(document).on('click', 'li', function(){
    $('#city').val($(this).text());
    $('#cityList').fadeOut();
});

});

在上面的程式碼中，我們使用了jQuery函式庫來簡化AJAX的使用。在使用者輸入文字後，我們透過AJAX將輸入的文字傳送給"fetch.php"檔案進行處理，並將傳回的城市名稱顯示在下拉清單中。使用者點擊某個城市名後，我們將該城市名稱填入輸入框中，並隱藏下拉清單。

那麼，"fetch.php"檔案是如何處理請求的呢？接下來，我們來寫"fetch.php"檔案的程式碼。

// 連線資料庫
$dsn = "mysql:host=localhost;dbname=test;charset=utf8";
$username = "root";
$password = "";
$options = array(

PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC

);
try{

$db = new PDO($dsn, $username, $password, $options);

}catch(PDOException $e){

die("连接数据库失败：" . $e->getMessage());

}

// 取得AJAX請求的參數
$query = $_POST['query'] ?? '';

##// 查詢資料庫中符合的城市名稱

$sql = "SELECT * FROM city WHERE city_name LIKE :query";
$stmt = $db->prepare($sql);
$stmt->bindValue(':query', ' %'.$query.'%');
$stmt->execute();
$result = $stmt->fetchAll();

// 傳回城市名稱列表

if($stmt->rowCount() > 0){

foreach($result as $row){
    echo "<li>". $row['city_name'] . "</li>";
}

}else{

echo "<li>无匹配城市</li>";

}

?>

#在上述程式碼中，我們先連接了資料庫。然後，我們取得AJAX請求的參數，並使用LIKE語句查詢資料庫中符合的城市名稱。最後，我們將查詢結果傳回給前端。

至此，我們完成了PHP表單中的自動填入和自動完成功能的實作。使用者只需輸入城市名的一部分，就可以自動取得符合的城市名，並在下拉清單中顯示。使用者選擇某個城市名後，自動填入輸入框中。這樣，我們不僅提供了便利的輸入方式，還提高了使用者體驗。

總之，PHP提供了強大的功能來處理表單中的自動填充和自動完成。透過合理的資料庫設計和前端技術，我們可以輕鬆實現這些功能，為使用者帶來更好的互動體驗。希望本文對您了解和使用PHP表單中的自動填充和自動完成有所幫助。

以上是如何處理PHP表單中的自動填充和自動完成的詳細內容。更多資訊請關注PHP中文網其他相關文章！