Umgang mit Autofill und Autocomplete in PHP-Formularen

So handhaben Sie das automatische Ausfüllen und die automatische Vervollständigung in PHP-Formularen

Mit der Entwicklung des Internets verlassen sich die Menschen immer mehr auf Funktionen zum automatischen Ausfüllen und zur automatischen Vervollständigung, um ihre Vorgänge auf der Website zu vereinfachen. Die Implementierung dieser Funktionen in PHP-Formularen ist nicht kompliziert. In diesem Artikel wird kurz vorgestellt, wie Sie PHP zum automatischen Ausfüllen und Vervollständigen von Formularen verwenden.

Bevor wir beginnen, müssen wir klären, was Autofill und Autocomplete sind. Unter Autofill versteht man das automatische Ausfüllen der Felder in einem Formular für Benutzer basierend auf ihren vorherigen Eingaben oder ihrem Verlauf. Wenn ein Benutzer beispielsweise eine E-Mail-Adresse eingibt, werden mögliche E-Mail-Adressen automatisch basierend auf der vorherigen Eingabe des Benutzers ausgefüllt. Unter Autovervollständigung versteht man die automatische Bereitstellung möglicher Optionen für den Benutzer während seines Eingabevorgangs. Wenn der Benutzer beispielsweise einen Städtenamen eingibt, werden ihm automatisch mögliche Städtenamen zur Auswahl angezeigt.

Zunächst benötigen wir eine Datenbank zum Speichern der Autofill- und Autocomplete-Daten. Nehmen wir als Beispiel den Stadtnamen. Erstellen Sie zunächst eine Datenbanktabelle mit dem Namen „city“, die ein Feld mit dem Namen „city_name“ zum Speichern des Stadtnamens enthält.

CREATE TABLE city (

city_name VARCHAR(255) NOT NULL

);

Als nächstes müssen wir einige Stadtnamendaten vorbereiten, um die Datenbank zu füllen. Wir können Daten manuell hinzufügen oder über eine CSV-Datei importieren.

INSERT INTO city (city_name) VALUES

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

Da wir nun die Datenbank und die Daten bereit haben, können wir mit der Verarbeitung des Formulars beginnen. Zunächst benötigen wir ein Eingabefeld, um Benutzereingaben zu empfangen.

Es ist zu beachten, dass wir das Autocomplete-Attribut des Eingabefelds auf „off“ setzen, um dies zu vermeiden Die standardmäßige automatische Vervollständigung des Browsers beeinträchtigt unsere automatische Vervollständigung.

Als nächstes verwenden wir AJAX, um die Funktionen zum automatischen Ausfüllen und Vervollständigen zu implementieren. Nachdem wir Text in das Eingabefeld eingegeben haben, erhalten wir über AJAX den passenden Städtenamen und zeigen ihn in der Dropdown-Liste an.

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

});

Im obigen Code haben wir die jQuery-Bibliothek verwendet, um die Verwendung von AJAX zu vereinfachen. Nachdem der Benutzer Text eingegeben hat, senden wir den eingegebenen Text zur Verarbeitung über AJAX an die Datei „fetch.php“ und zeigen den zurückgegebenen Stadtnamen in der Dropdown-Liste an. Nachdem der Benutzer auf einen Stadtnamen geklickt hat, geben wir den Stadtnamen in das Eingabefeld ein und blenden die Dropdown-Liste aus.

Wie geht die Datei „fetch.php“ mit Anfragen um? Als nächstes schreiben wir den Code für die Datei „fetch.php“.

//Mit der Datenbank verbinden
$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());

}

// Parameter der AJAX-Anfrage abrufen
$query = $_POST['query'] ? ? '';

//Fragen Sie den passenden Stadtnamen in der Datenbank ab
$sql = "SELECT * FROM city WHERE city_name LIKE :query";
$stmt = $db->prepare($sql);
$stmt ->bindValue( ':query', '%'.$query.'%');
$stmt->execute();
$result = $stmt->fetchAll();

// Rückgabe zur Städtenamenliste
if ($stmt->rowCount() > 0){

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

}else{

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

}
?>

Im obigen Code stellen wir zunächst eine Verbindung zur Datenbank her. Anschließend erhalten wir die Parameter der AJAX-Anfrage und fragen mit der LIKE-Anweisung den passenden Städtenamen in der Datenbank ab. Abschließend geben wir die Abfrageergebnisse an das Frontend zurück.

Zu diesem Zeitpunkt haben wir die Implementierung der Funktionen zum automatischen Ausfüllen und zur automatischen Vervollständigung in PHP-Formularen abgeschlossen. Benutzer müssen nur einen Teil des Stadtnamens eingeben und der passende Stadtname wird automatisch abgerufen und in der Dropdown-Liste angezeigt. Nachdem der Benutzer einen Städtenamen ausgewählt hat, wird dieser automatisch in das Eingabefeld eingetragen. Auf diese Weise stellen wir nicht nur eine komfortable Eingabemethode bereit, sondern verbessern auch das Benutzererlebnis.

Zusammenfassend lässt sich sagen, dass PHP leistungsstarke Funktionen zum automatischen Ausfüllen und Vervollständigen von Formularen bietet. Durch angemessenes Datenbankdesign und Front-End-Technologie können wir diese Funktionen einfach implementieren und den Benutzern ein besseres interaktives Erlebnis bieten. Ich hoffe, dieser Artikel hat Ihnen geholfen, Autofill und Autocomplete in PHP-Formularen zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonUmgang mit Autofill und Autocomplete in PHP-Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!