Ajax Live Search Example In PHP & MYSQL.
In this post, we will create a simple live search example in PHP & MySQL using Ajax. With the help of this tutorial, we can implement a live search feature in web applications using PHP & MySQL. This feature is useful when we have a large amount of data for some field and we don’t want to display the whole data at a time. In this case when the user types some characters then we can show data based on the typed character for better performance. It will improve the performance of our web application. This functionality can be implemented in PHP & MySQL using Jquery and Ajax.
Below are the steps to implement live search functionality in PHP & MySQL.
Create a Table And Insert Data In Mysql.
CREATE TABLE countries (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
countryname VARCHAR(50) NOT NULL
);
INSERT INTO `countries` (`countryname`)
VALUES
('Afghanistan'),
('Åland'),
('Albania'),
('Algeria'),
('American Samoa'),
('Andorra'),
('Guinea'),
('Guinea-Bissau'),
('Guyana'),
('Haiti'),
('Heard Island and McDonald Islands'),
('Honduras'),
('Hong Kong'),
('Hungary'),
('Iceland'),
('India'),
('Indonesia'),
('Iran'),
('Iraq'),
('Ireland'),
('Isle of Man'),
('Israel'),
('Italy'),
('Ivory Coast'),
('Jamaica'),
('Japan') Create a connection.php file and add the below line of code.
<?php
$servername='localhost';
$username='root';
$password='';
$dbname = "livedb";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?> Create an index.php file and add the below line of code.
<html lang="en">
<head>
<title>Live Search Example In PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.ullist{
padding-left:190px;
margin-bottom:20px;
width:635px;
margin-top:-15px
}
</style>
</head>
<body>
<h3 class="text-success" align="center">Live Search Example In PHP</h3><br>
<div class="container">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Live Search Example In PHP</div>
<form class="form-horizontal" method="post">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-2" for="title">Search :</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="live_search" name="live_search" tabindex="1">
</div>
</div>
<div >
<ul id="search_result" class="list-group ullist">
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<head>
<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');
$("#search_result li").click(function() {
var value = $(this).html();
$('#live_search').val(value);
$('#search_result').css('display', 'none');
});
}
});
} else {
$('#search_result').css('display', 'none');
}
});
});
</script>
</head>
</html>
Create an ajax-live-search.php file and add the below line of code.
<?php
require_once "./connection.php";
if (isset($_POST['query'])) {
$query = "SELECT * FROM countries WHERE countryname LIKE '{$_POST['query']}%'";
$result = mysqli_query($connection, $query);
if (mysqli_num_rows($result) > 0) {
while ($res = mysqli_fetch_array($result)) {
echo '<li tabindex = "2" class=list-group-item style=cursor:pointer value="$res[countryname]">'.$res["countryname"].'</li>';
}
} else {
echo "<div class='alert alert-danger mt-3 text-center' role='alert'>
Data not found
</div>
";
}
}
?>
Find All Date Between Two Dates In PHP. Router Link Example In VueJs.
