Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
    • Guest Posting Service
  • Advertise
  • About
  • Contact Us

Ajax Live Data Search using Jquery PHP MySql

March 29, 2020 Pakainfo Technology, Ajax, JavaScript, jQuery, Mysql, Mysqli, php, Programming Leave a comment

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

  • Ajax Live Data Search using Jquery PHP MySql
    • Step 1 Create a jQuery HTML Ajax Form
    • Step 2 Get Data using PHP
    • Step 3 Create a Database and Insert Records
    • Read
    • Summary
    • Related posts

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 :

  • Jobs
  • Make Money
  • Programming
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.

Related posts:

  1. ajax live data search using jquery php mysql
  2. Google Like Autosuggest Search Using PHP Ajax
ajax live data search using jqueryajax php mysql search exampleajax search box php mysql demoajax search box php mysql like googlejquery ajax search examplelive search php mysql databasephp mysql ajax search autocompletephp mysql with paginationsearch in php mysql with examples

Post navigation

Previous Post:Google Adsense Tutorial with How to Make Money?
Next Post:laravel join Multiple Tables using Model Example

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me

Categories

3movierulz (64) Ajax (464) AngularJS (377) ASP.NET (61) Bio (109) Bollywood (108) Codeigniter (175) CSS (98) Earn Money (93) Education (63) Entertainment (130) fullform (87) Google Adsense (64) Highcharts (77) History (40) Hollywood (109) JavaScript (1359) Jobs (42) jQuery (1423) Laravel (1088) LifeStyle (53) movierulz4 (63) Mysql (1035) Mysqli (894) php (2133) Programming (2345) Python (99) Software (178) Software (90) Stories (98) tamilrockers (104) Tamilrockers kannada (64) Tamilrockers telugu (61) Tech (147) Technology (2416) Tips and Tricks (130) Tools (214) Top10 (506) Trading (95) Trending (76) VueJs (250) Web Technology (113) webtools (200) wordpress (166) World (343)

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here
  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Info Grepper
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : [email protected]
Pakainfo

© 2023 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype Guest Posting Sites