Use Credit/Debit Cards in India and PayPal outside of India for better experience!

Ajax search and filters in PHP


Great working example of ajax filter and search in PHP

Source Code:

<?php
if(!empty($_POST) && isset($_POST['function']) && $_POST['function'] == 'search') {
    $keyword = $_POST['keyword'];
    $country = $_POST['country'];
    $link = mysqli_connect("localhost", "root", "", "mg_search_n_filters") or die("Failed to connect!");
    $query = "SELECT * FROM `mg_students` "
            . "WHERE CONCAT((first_name), (' '), (last_name)) LIKE '%{$keyword}%' "
            . "AND `country` LIKE '%{$country}%' "
            . "AND `status` = 'Enabled'";
    $result = mysqli_query($link, $query);
    if(mysqli_num_rows($result) > 0) {
        $sn = 1;
        echo '<table class="table table-bordered table-striped table-hover mt-5 mb-5">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Country</th>
                        </tr>
                    </thead>
                    <tbody>';
        while($row = mysqli_fetch_array($result)) {
            echo '<tr>
                    <th scope="row">'.$sn.'</th>
                    <td>'.$row['first_name'].' '.$row['last_name'].'</td>
                    <td>'.$row['country'].'</td>
                </tr>';
            $sn++;
        }
        echo '</tbody>
            </table>';
    }
    else {
        echo '<p>No results found!</p>';
        die;
    }
    die;
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Search & Filter</title>
        <link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

        <script src="assets/js/jquery.min.js" type="text/javascript"></script>
        <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
    </head>
    <body>
        <section>
            <div class="bg-ligh">
                <a class="text-muted" href="index.php"><h2 class="text-center p-3">Search & Filter</h2></a>
            </div>
        </section>
        <section class="bg-secondary text-muted container-fluid">
            <form class="mg-filter-form" action="" method="POST">
                <div class="row align-items-center p-3">
                    <div class="col-4"></div>
                    <div class="col-8">
                        <div class="row">
                            <div class="col-auto">
                                <select class="form-select" name="country">
                                    <option value="">All</option>
                                    <option value="India">India</option>
                                    <option value="Canada">Canada</option>
                                    <option value="USA">USA</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <input type="text" class="form-control" name="keyword" placeholder="Search">
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-dark">Search</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </section>
        <section class="container mt-5" style="min-height: calc(100vh - 273px);">
            <div class="mg-filter-result-section" style="display: none;">
                <hr/>
                <h3>Search results:</h3>
                <hr/>
                <div class="mg-filter-results"></div>
            </div>
        </section>
        <section class="bg-light pb-1">
            <hr/>
            <div class="text-center">
                <p><a class="text-muted" href="https://www.mgtechnologies.co.in/" target="_blank">Designed & Developed by Team MG</a></p>
            </div>
        </section>
        <script>
            $(document).ready(function () {
                $(".mg-filter-form").submit(function (event) {
                    event.preventDefault();
                    var formData = $(this).serialize();
                    $.ajax({
                        url: "",
                        data: "function=search&" + formData,
                        type: "POST",
                        success: function (data, textStatus, jqXHR) {
                            $(".mg-filter-results").html(data);
                            $(".mg-filter-result-section").show("slow");
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Free - Download it right now!


Tested

Include all files

Demo Download
Licence

Open Source

Reviews and Comments