PHP フォームで自動入力とオートコンプリートを処理する方法

PHP フォームでの自動入力とオートコンプリートの対処方法

インターネットの発展に伴い、人々はますます自動入力とオートコンプリート機能に依存して、フォーム上での操作を簡素化しています。 Webサイト。これらの関数を PHP フォームに実装することは複雑ではありませんが、この記事では、PHP を使用してフォームの自動入力とオートコンプリートを処理する方法を簡単に紹介します。

始める前に、オートフィルとオートコンプリートとは何かを明確にする必要があります。自動入力とは、ユーザーの以前の入力または履歴に基づいて、ユーザーのフォームのフィールドに自動的に入力することを指します。たとえば、ユーザーが電子メール アドレスを入力すると、ユーザーの以前の入力に基づいて、使用可能な電子メール アドレスが自動的に入力されます。オートコンプリートとは、ユーザーの入力プロセス中に可能なオプションを自動的に提供することを指します。たとえば、ユーザーが都市名を入力すると、候補となる都市名が自動的に表示され、ユーザーが選択できるようになります。

まず、オートフィルとオートコンプリートのデータを保存するデータベースが必要です。都市名を例に挙げると、まず、都市名を格納する「city_name」という名前のフィールドを含む「city」という名前のデータベース テーブルを作成します。

CREATE TABLE city (

city_name VARCHAR(255) NOT NULL

);

次に、データベースにデータを入力するために都市名データを準備する必要があります。データを手動で追加することも、CSV ファイルを使用してインポートすることもできます。

INSERT INTO city (city_name) VALUES

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

データベースとデータの準備ができたので、フォームの処理を開始できます。まず、ユーザー入力を受け取る入力ボックスが必要です。

input の autocomplete 属性を入れていることに注意してください。ボックス ブラウザのデフォルトのオートコンプリート機能がオートコンプリート機能に干渉しないようにするには、「オフ」に設定します。

次に、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();
});

});

上記のコードでは、AJAX の使用を簡素化するために jQuery ライブラリを使用しています。 。ユーザーがテキストを入力すると、入力されたテキストが「fetch.php」ファイルに送信され、AJAX を介して処理され、返された都市名がドロップダウン リストに表示されます。ユーザーが都市名をクリックした後、入力ボックスに都市名を入力し、ドロップダウン リストを非表示にします。

それでは、「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 中国語 Web サイトの他の関連記事を参照してください。