AngularJS Search Suggestion with PHP/MySQLi and UI-Router

leloup94 · 2025-02-27T05:16:30+0000

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.

CREATE

TABLE

`members`

(
`memid`

int

(

11

)

NOT

NULL

AUTO_INCREMENT

,
`firstname`

varchar

(

30

)

NOT

NULL

,
`lastname`

varchar

(

30

)

NOT

NULL

,
`address`

text

NOT

NULL

,
PRIMARY KEY

(

`memid`

)
)

ENGINE

=

InnoDB

DEFAULT

CHARSET

=

latin1;

INSERT

INTO

`members`

(

`memid`

,

`firstname`

,

`lastname`

,

`address`

)

VALUES
(

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>
<html

ng-app=

"app"

>
<head

>
<title

>

AngularJS Search Suggestion with PHP/MySQLi</

title

>
<meta

charset

=

"utf-8"

>
<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

>
<style

type

=

"text/css"

>
.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;
}
</

style

>
</

head

>
<body

>
<div

class

=

"container"

>
<h1

class

=

"page-header text-center"

>

AngularJS Search Suggestion with PHP/MySQLi</

h1

>
<div

ui-view></

div

>
</

div

>
<script

src

=

"app.js"

></

script

>
</

body

>
</

html

>

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"

)

;
$out

=

array

(

)

;
$sql

=

"SELECT * FROM members"

;
$query

=

$conn

->

query

(

$sql

)

;
while

(

$row

=

$query

->

fetch_array

(

)

)

{
$out

[

]

=

$row

;
}
echo

json_encode

(

$out

)

;
?>

home.html

As per our ui-router this is treated as our index view.

<div

class

=

"row"

>
<div

class

=

"col-sm-6 col-sm-offset-1"

ng-init=

"fetch()"

>
<h3

>

Member List</

h3

>
<table

class

=

"table table-bordered table-striped"

>
<thead

>
<tr

>
<th

>

Member ID</

th

>
<th

>

Firstname</

th

>
<th

>

Lastname</

th

>
<th

>

Address</

th

>
</

tr

>
</

thead

>
<tbody

>
<tr

ng-repeat=

"memberList in memberLists"

>
<td

>

{{ memberList.memid }}</

td

>
<td

>

{{ memberList.firstname }}</

td

>
<td

>

{{ memberList.lastname }}</

td

>
<td

>

{{ memberList.address }}</

td

>
</

tr

>
</

tbody

>
</

table

>
</

div

>
<div

class

=

"col-sm-4"

>
<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

>
<div

ng-show=

"noMember"

class

=

"no-sug"

>
No Suggestion Found
</

div

>
</

div

>
</

div

>

search.php

This is our PHP api that searches our MySQL database and returning the search match.

<?php
$conn

=

new

mysqli(

"localhost"

,

"root"

,

""

,

"angular"

)

;
$out

=

array

(

)

;
$data

=

json_decode

(

file_get_contents

(

'php://input'

)

)

;
$keyword

=

$data

->

keyword

;
if

(

empty

(

$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

;
}
}
echo

json_encode

(

$out

)

;
?>

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 :)

Download

You must upgrade your account or reply in the thread to view hidden text.

AngularJS Search Suggestion with PHP/MySQLi and UI-Router

More options

leloup94

452,292

323,340

323,349