Today, We want to share with you Ajax Live Data Search using Jquery PHP MySql.In this post we will show you live search php mysql database, hear for ajax search box php mysql like google we will give you demo and example for implement.In this post, we will learn about ajax live data search using jquery, php mysql with pagination with an example.

Ajax Live Data Search using Jquery PHP MySql

Contents

There are the Following The simple About ajax search box php mysql demo Full Information With Example and source code.

As I will cover this Post with live Working example to develop search in php mysql with examples, so the php mysql ajax search autocomplete is used for this example is following below.

Step 1: Create a jQuery HTML Ajax Form

index.php

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Pakainfo Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Ajax Live Data Find using JavaScript PHP MySqli</h2><br />
   <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by Member Details" class="form-control" />
    </div>
   </div>
   <br />
   <div id="result"></div>
  </div>
 </body>
</html>


<script>
$(document).ready(function(){

 get_member_rows();

 function get_member_rows(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   get_member_rows(search);
  }
  else
  {
   get_member_rows();
  }
 });
});
</script>

Step 2: Get Data using PHP

fetch.php

<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "website");
$output = '';
if(isset($_POST["query"]))
{
 $search = mysqli_real_escape_string($connect, $_POST["query"]);
 $query = "
  SELECT * FROM tbl_member 
  WHERE MemberName LIKE '%".$search."%'
  OR Address LIKE '%".$search."%' 
  OR City LIKE '%".$search."%' 
  OR PostalCode LIKE '%".$search."%' 
  OR Country LIKE '%".$search."%'
 ";
}
else
{
 $query = "
  SELECT * FROM tbl_member ORDER BY MemberID
 ";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '
  <div class="table-responsive">
   <table class="table table bordered">
    <tr>
     <th>Member Name</th>
     <th>Address</th>
     <th>City</th>
     <th>Postal Code</th>
     <th>Country</th>
    </tr>
 ';
 while($row = mysqli_fetch_array($result))
 {
  $output .= '
   <tr>
    <td>'.$row["MemberName"].'</td>
    <td>'.$row["Address"].'</td>
    <td>'.$row["City"].'</td>
    <td>'.$row["PostalCode"].'</td>
    <td>'.$row["Country"].'</td>
   </tr>
  ';
 }
 echo $output;
}
else
{
 echo 'Data Not Found';
}

?>

Step 3: Create a Database and Insert Records

Database

--
-- Database: `website`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_member`
--

CREATE TABLE IF NOT EXISTS `tbl_member` (
  `MemberID` int(11) NOT NULL AUTO_INCREMENT,
  `MemberName` varchar(250) NOT NULL,
  `Address` text NOT NULL,
  `City` varchar(250) NOT NULL,
  `PostalCode` varchar(30) NOT NULL,
  `Country` varchar(100) NOT NULL,
  PRIMARY KEY (`MemberID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;

--
-- Dumping data for table `tbl_member`
--

INSERT INTO `tbl_member` (`MemberID`, `MemberName`, `Address`, `City`, `PostalCode`, `Country`) VALUES
(1, 'Sanjay Pandya', 'Shakri park Str. 57', 'Berlin', '360002', 'Germany'),
(2, 'Balvant Trujillo', 'Om Nagar. de la bhends 2222', 'Rajkot D.F.', '5021', 'Rajkot'),
(3, 'Vikadsh Medapra', 'Tirupati 2312', 'Rajkot D.F.', '360005', 'Rajkot'),
(4, 'Rahul Bhanderi', '120 Ganesh Sq.', 'Gondal', 'WA1 1DP', 'UK'),
(5, 'JAlapa Pipaliya', 'Rua do bakra, 12', 'Jamanagar', '56897-363', 'Bhavvanagar'),
(6, 'Geeta Patodiya', 'ul. Atmiya 68', 'Walla', '01-012', 'Poland'),
(7, 'Bhagavti Chovatiya', 'nikudiya 45', 'Helsinki', '364858', 'Ahemdabad'),
(8, 'Dinesh Solanki', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'India'),
(9, 'Rakesh Donga', 'Rua do Kohali, 12', 'Jamanagar', '568965-363', 'Bhavvanagar'),
(10, 'Ankit Rathod', 'kochin 38', 'Oulu', '90110', 'Ahemdabad'),
(11, 'Ketan Sagpariya', '2, devliya du Commerce', 'Reims', '985648', 'Mubai'),
(12, 'Tulshi Sojitra', '722 Amin marg Blvd.', 'Kirkland', '56568', 'India'),
(13, 'Radhika Kotadiya', 'Satysai. 48', 'Butte', '59801', 'India');

Web Programming Tutorials Example with Demo

Read :

Also Read This 👉 PHP Autocomplete search with typeahead.js

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about ajax search box php mysql demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.