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:

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">
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Country</th>
        while($row = mysqli_fetch_array($result)) {
            echo '<tr>
                    <th scope="row">'.$sn.'</th>
                    <td>'.$row['first_name'].' '.$row['last_name'].'</td>
        echo '</tbody>
    else {
        echo '<p>No results found!</p>';
<!DOCTYPE html>
        <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>
            <div class="bg-ligh">
                <a class="text-muted" href="index.php"><h2 class="text-center p-3">Search & Filter</h2></a>
        <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>
                            <div class="col-auto">
                                <input type="text" class="form-control" name="keyword" placeholder="Search">
                            <div class="col-auto">
                                <button type="submit" class="btn btn-dark">Search</button>
        <section class="container mt-5" style="min-height: calc(100vh - 273px);">
            <div class="mg-filter-result-section" style="display: none;">
                <h3>Search results:</h3>
                <div class="mg-filter-results"></div>
        <section class="bg-light pb-1">
            <div class="text-center">
                <p><a class="text-muted" href="" target="_blank">Designed & Developed by Team MG</a></p>
            $(document).ready(function () {
                $(".mg-filter-form").submit(function (event) {
                    var formData = $(this).serialize();
                        url: "",
                        data: "function=search&" + formData,
                        type: "POST",
                        success: function (data, textStatus, jqXHR) {

Free - Download it right now!


Include all files

Demo Download

Open Source

Reviews and Comments