Sell Your ThemeAjax 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 DownloadUnlock Your Free Download for Just $2
Get updates!
Follow @themgtechnologyShare on
Author
Licence
Open Source