Mokey Nepal: Simple Live Data Search of Mysql table using Jquery Ajax And PHP Mysqli

Monday, March 27, 2017

This is a Simple Live Data Search of Mysql table using Jquery Ajax And PHP Mysqli.

First Create A Database called "10am" in phpmyadmin.
After Creating Database in phpmyadmin create table called 'lalita' .
Then Add Column's on lalita as id and set as autoincrement ,Name,Address,City,Country and set as varchar.
And last of database section insert some values on table columns

Copy this php scripts and paste it on index.php file .

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bramento online study</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<br />
<h2 align="center"> Simple Live Data Search of Mysql table using Jquery Ajax And PHP Mysqli.</h2><br />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search" id="search_text" placeholder="Write Something To Search" class="form-control" />
</div>
</div>
<br />
<div id="result"></div>
//javascripts to call ajax
<script>
$(document).ready(function(){
$('#search_text').keyup(function(){
var txt = $(this).val();
if(txt != '')
{
$.ajax({
url:"fetch.php",
method:"post",
data:{search:txt},
dataType:"text",
success:function(data)
{
$('#result').html(data);
}
});
}
else
{
$('#result').html('');
}
});
});
</script>
</div>
</body>
</html>

Copy and paste this php scripts on fetch.php file.