Getting Started
I've used CDN for Bootstrap, Angular JS and UI-Router so you need internet connection for them to work.
Creating our Database
First, we're gonna create our MySQL Database where we get our data.
1. Open phpMyAdmin.
2. Click databases, create a database and name it as
angular.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
(1, 'Neovic', 'Devierte', 'Silay City'),
(2, 'Julyn', 'Divinagracia', 'E.B. Magalona'),
(3, 'Gemalyn', 'Cepe', 'Bohol'),
(4, 'Tintin ', 'Demapanag', 'Talisy City'),
(5, 'Tintin ', 'Devierte', 'Silay City');
index.html
This is the main view of our app.
<!DOCTYPE html>
<title>AngularJS Search Suggestion with PHP/MySQLi
</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> .sug-list{
background-color: #4CAF50;
border: 1px solid #FFFFFF;
color: #FFFFFF;
padding: 10px 24px;
cursor: pointer;
width: 100%;
display: block;
margin-top:1px;
}
.sug-list:not(:last-child) {
border-bottom: none;
}
.sug-list a {
text-decoration:none;
color: #FFFFFF;
}
.no-sug{
background-color: #4CAF50;
border: 1px solid #FFFFFF;
color: #FFFFFF;
padding: 10px 24px;
width: 100%;
display: block;
margin-top:1px;
}
<h1 class="page-header text-center">AngularJS Search Suggestion with PHP/MySQLi
</h1>
app.js
This is the main angular js script of our app.
var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
.state('member', {
url: '/member/{member:json}',
params: {member: null},
templateUrl: 'member.html',
controller: 'memberCtrl'
})
});
app.controller('homeCtrl', function($scope, $http) {
$scope.hasMember = false;
$scope.noMember = false;
$scope.fetch = function(){
$http.get('fetch.php').success(function(data){
$scope.memberLists = data;
});
}
$scope.search = function(){
if($scope.keyword == ''){
$scope.hasMember = false;
$scope.noMember = false;
}
else{
$http.post('search.php', {
'keyword': $scope.keyword
})
.success(function(data){
if(data.length > 0){
$scope.members = data;
$scope.hasMember = true;
$scope.noMember = false;
}
else{
$scope.noMember = true;
$scope.hasMember = false;
}
});
}
}
});
app.controller('memberCtrl', function($scope, $stateParams) {
$scope.details = $stateParams.member;
});
fetch.php
This is our PHP api that fetches data from our MySQL database.
<?php
$conn = new mysqli("localhost", "root", "", "angular");
$sql = "SELECT * FROM members";
$query = $conn->query($sql);
while($row=$query->fetch_array()){
$out[] = $row;
}
?>
home.html
As per our ui-router this is treated as our index view.
<div class="col-sm-6 col-sm-offset-1" ng-init="fetch()"> <table class="table table-bordered table-striped"> <tr ng-repeat="memberList in memberLists"> <td>{{ memberList.memid }}
</td> <td>{{ memberList.firstname }}
</td> <td>{{ memberList.lastname }}
</td> <td>{{ memberList.address }}
</td> <input type="text" class="form-control" ng-model="keyword" ng-keyup="search()" placeholder="Search for Firstname, Lastname or Address"> <div ng-repeat="member in members" ng-show="hasMember" class="sug-list"> <a ui-sref="member({member: member})">{{ member.firstname + ' ' + member.lastname }}
</a> <div ng-show="noMember" class="no-sug"> No Suggestion Found
search.php
This is our PHP api that searches our MySQL database and returning the search match.
<?php
$conn = new mysqli("localhost", "root", "", "angular");
$keyword = $data->keyword;
$out = '';
}
else{
$sql = "SELECT * FROM members WHERE firstname LIKE '%$keyword%' OR lastname LIKE '%$keyword%' OR address LIKE '%$keyword%'";
$query = $conn->query($sql);
while($row=$query->fetch_array()){
$out[] = $row;
}
}
?>
member.html
Lastly, this is where we view the details of our clicked search result.
<h2 class="text-center">Member Details
</h1> <div class="col-sm-4 col-sm-offset-4"> <h3>Member ID: {{ details.memid }}
</h3> <h3>Firstname: {{ details.firstname }}
</h3> <h3>Lastname: {{ details.lastname }}
</h3> <h3>Address: {{ details.address }}
</h3>
<button type="button" ui-sref="home" class="btn btn-primary">Back
</button>
That ends this tutorial. Happy Coding :)