Live Data Search using PHP MySqli and Jquery Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Data Search using PHP MySqli and Jquery Ajax</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"ajaxlivesearch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != ''){
load_data(search);
}else{
load_data();
}
});
});
</script>
</head>
<body>
<div class="container search-table">
<p><h2 align="center">Live Data Search using PHP MySqli and Jquery Ajax</h2></p>
<div class="search-box">
<div class="row">
<div class="col-md-3">
<h5>Search All Fields</h5>
</div>
<div class="col-md-9">
<input type="text" name="search_text" id="search_text" class="form-control" placeholder="Search all fields e.g. HTML">
</div>
</div>
</div>
<div id="result"></div>
</div>
<style>
.search-table{
padding: 10%;
margin-top: -6%;
}
.search-box{
background: #c1c1c1;
border: 1px solid #ababab;
padding: 3%;
}
.search-box input:focus{
box-shadow:none;
border:2px solid #eeeeee;
}
.search-list{
background: #fff;
border: 1px solid #ababab;
border-top: none;
}
.search-list h3{
background: #eee;
padding: 3%;color:#fe6f41;
margin-bottom: 0%;
}
</style>
</body>
</html>
//ajaxlivesearch.php
<div class="search-list">
<?php
include"dbcon.php";
$output = '';
if(isset($_POST["query"]))
{
$search = mysqli_real_escape_string($conn, $_POST["query"]);
$query = "SELECT * FROM tblprogramming WHERE title LIKE '%".$search."%' OR category LIKE '%".$search."%'";
}else{
$query = "SELECT * FROM tblprogramming ORDER BY id";
}
$result = mysqli_query($conn, $query);
if(mysqli_num_rows($result) > 0) {
$totalfound = mysqli_num_rows($result);
$output .= '<h3>'.$totalfound.' Records Found</h3>
<table class="table table-striped custab">
<thead>
<tr>
<th>Title</th>
<th>Category</th>
</tr>
</thead>
<tbody>';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["title"].'</td>
<td>'.$row["category"].'</td>
</tr>';
}
echo $output;
}else{
echo 'No Rocord Found';
}
?>
</tbody>
</table>
</div>
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
//tablebase table tblprogramming
CREATE TABLE `tblprogramming` (
`id` int(11) NOT NULL,
`title` varchar(250) NOT NULL,
`category` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tblprogramming`
--
INSERT INTO `tblprogramming` (`id`, `title`, `category`) VALUES
(1, 'HTML', 'Web Development'),
(2, 'PHP', 'Web Development'),
(3, 'C#', 'Programming Language'),
(4, 'JavaScript', 'Web Development'),
(5, 'Bootstrap', 'Web Design'),
(6, 'Python', 'Programming Language'),
(7, 'Android', 'App Development'),
(8, 'Angular JS', 'Web Delopment'),
(9, 'Java', 'Programming Language'),
(10, 'Python Django', 'Web Development'),
(11, 'Codeigniter', 'Web Development'),
(12, 'Laravel', 'Web Development'),
(13, 'Wordpress', 'Web Development');
VIDEO
Live Data Search using PHP MySqli and Jquery Ajax
