https://angularjs.org/ version 1.8.2
CDN : https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
Bootstrap
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Database Table
CREATE TABLE `employee` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`position` varchar(100) NOT NULL,
`office` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`salary` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `employee` (`id`, `name`, `position`, `office`, `age`, `salary`) VALUES
(1, 'Tiger Wood', 'Accountant', 'Tokyo', 36, 5689),
(2, 'Mark Oto Ednalan', 'Chief Executive Officer (CEO)', 'London', 56, 5648),
(3, 'Jacob thompson', 'Junior Technical Author', 'San Francisco', 23, 5689),
(4, 'cylde Ednalan', 'Software Engineer', 'Olongapo', 23, 54654),
(5, 'Rhona Davidson', 'Software Engineer', 'San Francisco', 26, 5465),
(6, 'Quinn Flynn', 'Integration Specialist', 'New York', 53, 56465),
(8, 'Tiger Nixon', 'Software Engineer', 'London', 45, 456),
(9, 'Airi Satou updated', 'Pre-Sales Support updated', 'New York', 25, 4568),
(10, 'Angelica Ramos updated', 'Sales Assistant updated', 'New York', 45, 456),
(11, 'Ashton updated', 'Senior Javascript Developer', 'Olongapo', 45, 54565),
(12, 'Bradley Greer', 'Regional Director', 'San Francisco', 27, 5485),
(13, 'Brenden Wagner', 'Javascript Developer', 'San Francisco', 38, 65468),
(14, 'Brielle Williamson', 'Personnel Lead', 'Olongapo', 56, 354685),
(15, 'Bruno Nash', 'Customer Support', 'New York', 36, 65465),
(16, 'cairocoders', 'Sales Assistant', 'Sydney', 45, 56465),
(17, 'Zorita Serrano', 'Support Engineer', 'San Francisco', 38, 6548),
(18, 'Zenaida Frank', 'Chief Operating Officer (COO)', 'San Francisco', 39, 545),
(19, 'Sakura Yamamoto', 'Support Engineer', 'Tokyo', 48, 5468),
(20, 'Serge Baldwin', 'Data Coordinator', 'Singapore', 85, 5646),
(21, 'Shad Decker', 'Regional Director', 'Tokyo', 45, 4545);
ALTER TABLE `employee`
ADD PRIMARY KEY (`id`);
ALTER TABLE `employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
index.php
//index.php
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Live Data Search with PHP Mysql and bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div class="container" ng-app="angularlivesearch" ng-controller="search_controller" ng-init="fetchData()">
<br />
<h3 align="center">AngularJS 1.8.2 Live Data Search with PHP Mysql and bootstrap</h3>
<br />
<div class="form-group">
<div class="input-group">
<input type="text" name="search_query" ng-model="search_query" ng-keyup="fetchData()" placeholder="Search" class="form-control" />
</div>
</div>
<br />
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>office</th>
<th>age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in searchData">
<td>{{ data.name }}</td>
<td>{{ data.position }}</td>
<td>{{ data.office }}</td>
<td>{{ data.age }}</td>
<td>{{ data.salary }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('angularlivesearch', []);
app.controller('search_controller', function($scope, $http){
$scope.fetchData = function(){
$http({
method: 'POST',
url: 'fetch.php',
data:{search_query:$scope.search_query}
}).then(function (data){
console.log(data)
$scope.searchData = data.data;
},function (error){
console.log(error, 'can not get data.');
});
};
});
</script>
</body>
</html>
fetch.php
//fetch.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=testingdb", "root", "");
$form_data = json_decode(file_get_contents("php://input"));
$query = '';
$data = array();
if(isset($form_data->search_query))
{
$search_query = $form_data->search_query;
$query = "
SELECT * FROM employee
WHERE (name LIKE '%$search_query%'
OR position LIKE '%$search_query%'
OR office LIKE '%$search_query%')
";
}else{
$query = "SELECT * FROM employee ORDER BY name ASC";
}
$statement = $connect->prepare($query);
if($statement->execute())
{
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
?>
