How to handle autofill and autocomplete in PHP forms

How to deal with autofill and autocomplete in PHP forms

With the development of the Internet, people are increasingly relying on autofill and autocomplete features to simplify their Operations on the Website. Implementing these functions in PHP forms is not complicated. This article will briefly introduce how to use PHP to handle auto-fill and auto-complete of forms.

Before we begin, we need to clarify what autofill and autocomplete are. Autofill refers to automatically filling in the fields in a form for users based on their previous input or history. For example, when a user enters an email address, possible email addresses are automatically filled in based on the user's previous input. Auto-complete refers to automatically providing possible options to the user during their input process. For example, when the user enters a city name, possible city names are automatically displayed for the user to choose.

First, we need a database to store autofill and autocomplete data. Let's take the city name as an example. First, create a database table named "city", which contains a field named "city_name" to store the city name.

CREATE TABLE city (

city_name VARCHAR(255) NOT NULL

);

Next, we need to prepare some city name data to populate the database. We can add data manually or import it using a CSV file.

INSERT INTO city (city_name) VALUES

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

Now that we have the database and data ready, we can start processing the form. First, we need an input box to receive user input.

It should be noted that we put the autocomplete attribute of the input box Set to "off" to prevent the browser's default autocomplete function from interfering with our autocomplete function.

Next, we use AJAX to implement the auto-fill and auto-complete functions. After we enter text in the input box, we obtain the matching city name through AJAX and display it in the drop-down list.

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

});

In the above code, we use the jQuery library to simplify the use of AJAX . After the user enters text, we send the entered text to the "fetch.php" file for processing through AJAX, and display the returned city name in the drop-down list. After the user clicks on a city name, we fill the city name into the input box and hide the drop-down list.

So, how does the "fetch.php" file handle requests? Next, let's write the code for the "fetch.php" file.

//Connect to the database
$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());

}

// Get the parameters of the AJAX request
$query = $_POST['query'] ?? '';

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

// Return the list of city names
if($stmt->rowCount() > 0){

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

}else{

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

}
?>

in the above In the code, we first connect to the database. Then, we get the parameters of the AJAX request and use the LIKE statement to query the matching city name in the database. Finally, we return the query results to the front end.

At this point, we have completed the implementation of the auto-fill and auto-complete functions in the PHP form. Users only need to enter part of the city name, and the matching city name will be automatically obtained and displayed in the drop-down list. After the user selects a city name, it is automatically filled in the input box. In this way, we not only provide a convenient input method, but also improve the user experience.

In short, PHP provides powerful features to handle autofill and autocomplete in forms. Through reasonable database design and front-end technology, we can easily implement these functions and bring a better interactive experience to users. I hope this article has been helpful for you to understand and use autofill and autocomplete in PHP forms.

The above is the detailed content of How to handle autofill and autocomplete in PHP forms. For more information, please follow other related articles on the PHP Chinese website!