Autocomplete data on multiple fields using PHP, jQuery, and AJAX

Creating autocomplete functionality for multiple fields using PHP, jQuery, and AJAX is a common task. In this example, I'll demonstrate how to implement autocomplete for multiple input fields with data fetched from a PHP script using jQuery and AJAX. We'll use jQuery UI's Autocomplete widget for this purpose.

Here are the steps to implement autocomplete for multiple fields:

Step 1: Set Up Your HTML

Create an HTML form with multiple input fields for which you want to implement autocomplete.

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Autocomplete Fields</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <form>
        <label for="field1">Field 1:</label>
        <input type="text" id="field1" name="field1" class="autocomplete">
        <br>
        <label for="field2">Field 2:</label>
        <input type="text" id="field2" name="field2" class="autocomplete">
        <br>
        <!-- Add more input fields as needed -->
    </form>

    <script>
        $(document).ready(function() {
            $(".autocomplete").autocomplete({
                source: "autocomplete.php", // The PHP script to fetch data
                minLength: 2, // Minimum characters to trigger autocomplete
            });
        });
    </script>
</body>
</html>

Step 2: Create the PHP Script for Autocomplete

Create a PHP script (autocomplete.php) that will handle the AJAX request and provide autocomplete suggestions based on user input. This script should query your database or other data source to retrieve relevant suggestions.

<?php
// Connect to your database or fetch data from another source
// Perform a query to retrieve autocomplete suggestions based on the user's input

$user_input = $_GET['term']; // Get the user's input from the AJAX request

// Query the database or other data source to fetch suggestions
// Example:
// $suggestions = fetchSuggestionsFromDatabase($user_input);

// For demonstration purposes, I'll provide sample suggestions as an array
$suggestions = array(
    "Suggestion 1",
    "Suggestion 2",
    "Suggestion 3",
);

// Return the suggestions as JSON
echo json_encode($suggestions);
?>

Adjust the code within the PHP script to fetch relevant suggestions from your data source based on the user's input.

Step 3: Implement Database Query (Optional)

If you're using a database, you'll need to modify the PHP script to perform a database query to retrieve suggestions based on the user's input. You can use MySQL, PostgreSQL, or any other database you prefer.

Step 4: Style and Enhance

You can style the autocomplete dropdown and enhance it further according to your project's design and functionality requirements.

With these steps, you've implemented autocomplete functionality for multiple input fields using PHP, jQuery, and AJAX. Users will see suggestions as they type into the input fields, and the suggestions will be provided by the PHP script based on the user's input.

Muhammad Alfaiz
Alfaiz 6 months ago
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x