PHP Ajax Search MySQL Database Example
Mar 24, 2022 . Admin
Hello dev,
I am going to explain you how to PHP ajax live search mysql database. You will learn Ajax search dropdown list PHP from database MySQL phpmyadmin. In side this article we will see Ajax search dropdown list PHP from database MySQL.
This article will give you simple example of Ajax live data search using jquery PHP MySQL. We will use get simple how to create search bar in Ajax with PHP and MySQL.
I will give you simple Example of How to PHP Ajax MySQL live search example.
So, let's see bellow solution:
db.php
<?php
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = "demos";
$connection = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if(!$connection){
die('Database connection error : ' .mysql_error());
}
?>
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP Ajax Search MySQL Database - Mywebtuts.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12 h-75">
<div class="card w-75 m-auto" style="height: 300px;">
<div class="card-header alert alert-info text-center mb-3">
<h2>PHP Ajax Search MySQL Database - Mywebtuts.com</h2>
</div>
<input type="text" class="form-control w-50" name="live_search" id="live_search" autocomplete="off" placeholder="Search ..." style="margin-left: 20px;">
<div id="search_result" style="margin-left: 20px;"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#live_search").keyup(function () {
var query = $(this).val();
if (query != "") {
$.ajax({
url: 'ajax-live-search.php',
method: 'POST',
data: {
query: query
},
success: function (data) {
$('#search_result').html(data);
$('#search_result').css('display', 'block');
$("#live_search").focusout(function () {
$('#search_result').css('display', 'none');
});
$("#live_search").focusin(function () {
$('#search_result').css('display', 'block');
});
}
});
} else {
$('#search_result').css('display', 'none');
}
});
});
</script>
</body>
</html>
ajax-live-search.php
<?php
require_once "db.php";
if (isset($_POST['query'])) {
$query = "SELECT * FROM categor WHERE name LIKE '{$_POST['query']}%' LIMIT 100";
$result = mysqli_query($connection, $query);
if (mysqli_num_rows($result) > 0) {
while ($res = mysqli_fetch_array($result)) {
echo $res['name']. "<br/>";
}
} else {
echo "<div class='alert alert-danger mt-3 text-center' role='alert'>Song not found</div>";
}
}
?>
Output:
It will help you...