July 17, 2019

AngularJS Live Data Search using PHP MySQL

If you looking for AngularJS live data search using PHP and MySQL, here you are in the right place the following steps help you to do the live data search. With the help fo AngularJS, you can search the data without refreshing the page, most of the users don’t like the data search redirect to another page instead of loading in the same page is the best way to showing the result. When you enter your need in the search box it automatically collects the data from the MySQL database and shows it on live. Based on the query script the function will search the data from all column in MySQL table and it will display on the page without refresh the page.

Using textbox here the search functionality works, when the user enters the data in the search bar it automatically fetch the user data from the MySQL database. Based on the textbox on your type it filters the data according to which you have entered in the textbox. In our previous tutorials we have done already live search using jQuery , Ajax but in AngularJS will help to reduce the loading capacity this makes the users happy.

Database

--
-- Database: `tut`
--

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

--
-- Table structure for table `user_details`
--

CREATE TABLE `user_details` (
  `UserID` int(11) NOT NULL,
  `UserName` varchar(255) NOT NULL,
  `Email` varchar(255) NOT NULL,
  `Address` text NOT NULL,
  `City` varchar(250) NOT NULL,
  `PostalCode` varchar(30) NOT NULL,
  `Country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `user_details`
--

INSERT INTO `user_details` (`UserID`, `UserName`, `Email`, `Address`, `City`, `PostalCode`, `Country`) VALUES
(1, 'Maria Anders', 'maria@gmail.com', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),
(2, 'Mohan Raj', 'mraj@softaox.info', 'Avda. de la Construction 2222', 'TamilNadu', '5021', 'India'),
(3, 'Antonio Moreno', 'anto@gmail.com', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),
(4, 'Hardy', 'hardy@gmail.com', '120 Hanover Sq.', 'London', 'WA1 1DP', 'United Kingdom'),
(5, 'Paula Parente', 'paula@softaox.info', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(6, 'Wolski Zbyszek', 'wolski@gmail.com', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),
(7, 'Matti Karttunen', 'matti@yahoo.com', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),
(8, 'Karl Jablonski', 'karl@yahoo.com', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'United States'),
(9, 'Paula Parente', 'paula@gmail.com', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
(10, 'John Koskitalo', 'john@gmail.com', 'Torikatu 38', 'Oulu', '90110', 'Finland'),
(11, 'Ann Devon', 'ann@softaox.info', '35 King George', 'London', 'WX3 6FW', 'United Kingdom'),
(12, 'Janine Labrune', 'janine@softaox.info', '67, rue des Cinquante Otages', 'Nantes', '44000', 'Finland'),
(13, 'Kathryn Segal', 'kathryn@gmail.com', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),
(14, 'Elizabeth Brown', 'elizabeth@softaox.info', 'Berkeley Gardens 12 Brewery', 'London', 'WX1 6LT', 'United Kingdom'),
(15, 'Trina Davidson', 'trina@gmail.com', '1049 Lockhart Drive', 'Barrie', 'ON L4M 3B1', 'Canada'),
(16, 'Siva', 'siva@softaox.info', 'Industrieweg 56', 'TamilNadu', '7803', 'India'),
(17, 'Joyce Rosenberry', 'joyce@gmail.com', 'Norra Esplanaden 56', 'HELSINKI', '380', 'Finland'),
(18, 'Ronald Bowne', 'ronald@softaox.info', '2343 Shadowmar Drive', 'New Orleans', '70112', 'United States'),
(19, 'Justin Adams', 'justin@gmail.com', '45, rue de Lille', 'ARMENTIERES', '59280', 'France'),
(20, 'Pedro Afonso', 'pedro@gmail.com', 'Av. dos Lusiadas, 23', 'Sao Paulo', '05432-043', 'Brazil');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user_details`
--
ALTER TABLE `user_details`
  ADD PRIMARY KEY (`UserID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user_details`
--
ALTER TABLE `user_details`
  MODIFY `UserID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=116;
COMMIT;

-- Database: `tut`

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

-- Table structure for table `user_details`

CREATE TABLE `user_details` (

`UserID` int(11) NOT NULL,

`UserName` varchar(255) NOT NULL,

`Email` varchar(255) NOT NULL,

`Address` text NOT NULL,

`City` varchar(250) NOT NULL,

`PostalCode` varchar(30) NOT NULL,

`Country` varchar(100) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

-- Dumping data for table `user_details`

INSERT INTO `user_details` (`UserID`, `UserName`, `Email`, `Address`, `City`, `PostalCode`, `Country`) VALUES

(1, 'Maria Anders', '[email protected]', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),

(2, 'Mohan Raj', '[email protected]', 'Avda. de la Construction 2222', 'TamilNadu', '5021', 'India'),

(3, 'Antonio Moreno', '[email protected]', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),

(4, 'Hardy', '[email protected]', '120 Hanover Sq.', 'London', 'WA1 1DP', 'United Kingdom'),

(5, 'Paula Parente', '[email protected]', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),

(6, 'Wolski Zbyszek', '[email protected]', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),

(7, 'Matti Karttunen', '[email protected]', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),

(8, 'Karl Jablonski', '[email protected]', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'United States'),

(9, 'Paula Parente', '[email protected]', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),

(10, 'John Koskitalo', '[email protected]', 'Torikatu 38', 'Oulu', '90110', 'Finland'),

(11, 'Ann Devon', '[email protected]', '35 King George', 'London', 'WX3 6FW', 'United Kingdom'),

(12, 'Janine Labrune', '[email protected]', '67, rue des Cinquante Otages', 'Nantes', '44000', 'Finland'),

(13, 'Kathryn Segal', '[email protected]', 'Augsburger Strabe 40', 'Ludenscheid Gevelndorf', '58513', 'Germany'),

(14, 'Elizabeth Brown', '[email protected]', 'Berkeley Gardens 12 Brewery', 'London', 'WX1 6LT', 'United Kingdom'),

(15, 'Trina Davidson', '[email protected]', '1049 Lockhart Drive', 'Barrie', 'ON L4M 3B1', 'Canada'),

(16, 'Siva', '[email protected]', 'Industrieweg 56', 'TamilNadu', '7803', 'India'),

(17, 'Joyce Rosenberry', '[email protected]', 'Norra Esplanaden 56', 'HELSINKI', '380', 'Finland'),

(18, 'Ronald Bowne', '[email protected]', '2343 Shadowmar Drive', 'New Orleans', '70112', 'United States'),

(19, 'Justin Adams', '[email protected]', '45, rue de Lille', 'ARMENTIERES', '59280', 'France'),

(20, 'Pedro Afonso', '[email protected]', 'Av. dos Lusiadas, 23', 'Sao Paulo', '05432-043', 'Brazil');

-- Indexes for dumped tables

-- Indexes for table `user_details`

ALTER TABLE `user_details`

ADD PRIMARY KEY (`UserID`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `user_details`

ALTER TABLE `user_details`

MODIFY `UserID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=116;

COMMIT;

index.php

<!DOCTYPE html>
<html>
 <head>
  <title>AngularJS Live Data Search using PHP MySQL - softAOX</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
 </head>
 <body>
 <style>
 .form-control-borderless {
    border: none;
}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
    border: none;
    outline: none;
    box-shadow: none;
}
 </style>
  
  <div class="container" ng-app="myApp" ng-controller="dataController" ng-init="fetchData()">
   <br />
   <h3 align="center">AngularJS Live Data Search using PHP MySQL</h3>
   <br />

   <div class="col-md-12">
        <form class="card card-sm">
            <div class="card-body row no-gutters align-items-center">
                <div class="col-auto">
                    <i class="fas fa-search h4 text-body"></i>
                </div>
                <!--end of col-->
                <div class="col">
                    <input class="form-control form-control-lg form-control-borderless" type="search" name="data_search" ng-model="data_search" ng-keyup="fetchData()" placeholder="Search topics or keywords">
                </div>
                <!--end of col-->
                <div class="col-auto">
                    <button class="btn btn-lg btn-success" type="submit">Search</button>
                </div>
                <!--end of col-->
            </div>
        </form>
    </div>
   <br />
   <table class="table table-striped">
    <thead>
     <tr>
      <th>User Name</th>
      <th>Email</th>
      <th>Address</th>
      <th>City</th>
      <th>Postal Code</th>
      <th>Country</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="data in searchData">
      <td>{{ data.UserName }}</td>
      <td>{{ data.Email }}</td>
      <td>{{ data.Address }}</td>
      <td>{{ data.City }}</td>
      <td>{{ data.PostalCode }}</td>
      <td>{{ data.Country }}</td>
     </tr>
    </tbody>
   </table>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
 <script>
var app = angular.module('myApp', []);
app.controller('dataController', function($scope, $http){
 $scope.fetchData = function(){
  $http({
   method:"POST",
   url:"fetch.php",
   data:{data_search:$scope.data_search}
  }).success(function(data){
   $scope.searchData = data;
  });
 };
});
</script>
 </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>AngularJS Live Data Search using PHP MySQL - softAOX</title>

</head>

<body>

<style>

.form-control-borderless {

border: none;

}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {

border: none;

outline: none;

box-shadow: none;

}

</style>

<br />

<h3 align="center">AngularJS Live Data Search using PHP MySQL</h3>

<br />

</div>

</div>

<button class="btn btn-lg btn-success" type="submit">Search</button>

</div>

</div>

</form>

</div>

<br />

<thead>

<tr>

<th>Email</th>

<th>Address</th>

<th>Postal Code</th>

<th>Country</th>

</tr>

</thead>

<tbody>

<td>{{ data.UserName }}</td>

<td>{{ data.Email }}</td>

<td>{{ data.Address }}</td>

<td>{{ data.PostalCode }}</td>

<td>{{ data.Country }}</td>

</tr>

</tbody>

</table>

</div>

var app = angular.module('myApp', []);

app.controller('dataController', function($scope, $http){

$scope.fetchData = function(){

$http({

method:"POST",

url:"fetch.php",

data:{data_search:$scope.data_search}

}).success(function(data){

$scope.searchData = data;

});

};

});

</script>

</body>

</html>

fetch.php

<?php
 $host = "localhost";  
 $db_user = "root";  
 $db_pass = "";  
 $dbname = "tut";  

 $connect = new PDO("mysql:host=$host; dbname=$dbname", $db_user, $db_pass); 

$form_data = json_decode(file_get_contents("php://input"));

$query = '';
$data = array();

if(isset($form_data->data_search))
{
 $data_search = $form_data->data_search;
 $query = "
 SELECT * FROM user_details 
 WHERE (UserName LIKE '%$data_search%' 
 OR Address LIKE '%$data_search%' 
 OR City LIKE '%$data_search%' 
 OR PostalCode LIKE '%$data_search%' 
 OR Country LIKE '%$data_search%') 
 OR Email = '$data_search'
 ";
}
else
{
 $query = "SELECT * FROM user_details ORDER BY UserName ASC";
}

$statement = $connect->prepare($query);

if($statement->execute())
{
 while($row = $statement->fetch(PDO::FETCH_ASSOC))
 {
  $data[] = $row;
 }
 echo json_encode($data);
}

?>

<?php

$host = "localhost";

$db_user = "root";

$db_pass = "";

$dbname = "tut";

$connect = new PDO("mysql:host=$host; dbname=$dbname", $db_user, $db_pass);

$form_data = json_decode(file_get_contents("php://input"));

$query = '';

$data = array();

if(isset($form_data->data_search))

{

$data_search = $form_data->data_search;

$query = "

SELECT * FROM user_details

WHERE (UserName LIKE '%$data_search%'

OR Address LIKE '%$data_search%'

OR City LIKE '%$data_search%'

OR PostalCode LIKE '%$data_search%'

OR Country LIKE '%$data_search%')

OR Email = '$data_search'

}

else

{

$query = "SELECT * FROM user_details ORDER BY UserName ASC";

}

$statement = $connect->prepare($query);

if($statement->execute())

{

while($row = $statement->fetch(PDO::FETCH_ASSOC))

{

$data[] = $row;

}

echo json_encode($data);

}

Preview & Download

Data Search Live Search

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

AngularJS Live Data Search using PHP MySQL

Share:

Database

index.php

fetch.php

Preview & Download

Mraj

Don't miss on latest updates