How To Make Search with Ajax php form with mysql database

...

Make live Search with php and mysql

Cross-Origin AJAX Requests with jQuery

In the realm of web development, the integration of AJAX technology has transformed user interaction by providing dynamic and responsive experiences. In this blog post, we'll explore how to create a real-time product name suggestion feature using AJAX, PHP, and MySQL while ensuring data security and optimizing the code by utilizing mysqli_connect() for database operations.

Setting Up the Database

To start, assume you have a MySQL database set up with a table named products. This table contains columns such as product_id and product_name.

<!DOCTYPE html>
<html>
<head>
    <title>Product Name Suggestions</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#productName').on('input', function() {
                var input = $(this).val();
                if (input) {
                    $.ajax({
                        type: 'POST',
                        url: 'suggestions.php',
                        data: { productName: input },
                        success: function(response) {
                            var data = JSON.parse(response);
                            var dropdown = $('#suggestions');

                            dropdown.empty();

                            if (data.length > 0) {
                                data.forEach(function(product) {
                                    dropdown.append('<option value="' + product + '">');
                                });
                            } else {
                                dropdown.append('<option value="" disabled>No suggestions found</option>');
                            }
                        }
                    });
                } else {
                    $('#suggestions').empty();
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" id="productName" placeholder="Enter product name">
    <select id="suggestions"></select>
</body>
</html>

Creating the PHP Script Using

Now, let's build the PHP script suggestions.php that connects to the database, fetches product name suggestions based on user input, and returns the results for the AJAX request.

<?php

$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['productName'])) {
    $productName = $_POST['productName'];

    $sql = "SELECT product_name FROM products WHERE product_name LIKE '%$productName%'";
    $result = mysqli_query($conn, $sql);

    $data = array();

    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $data[] = $row['product_name'];
        }
    }

    echo json_encode($data);
}

mysqli_close($conn);
?>

Enhancing User Interaction with Dynamic Suggestions

This combination of HTML, JavaScript, and PHP facilitates a seamless user experience. As users input text into the designated field, the script triggers an AJAX request to suggestions.php, which in turn retrieves product name suggestions from the database based on the user input and displays the suggestions in real-time within a dropdown list.

After use the code

The integration of AJAX-driven product name suggestions, coupled with PHP and MySQL utilizing mysqli_connect(), exemplifies the power of real-time interaction in web applications. This approach enables users to receive immediate feedback and enhances the search process, promoting a more intuitive and engaging user experience. Remember, ensuring security measures for handling user inputs and implementing efficient error handling in PHP scripts is crucial for creating robust and secure web applications. Enjoy exploring and implementing these dynamic AJAX features into your web development projects!