AngularJS Search Auto Suggestion box with PHP MySQLi

Contents

In this Post We Will Explain About is AngularJS Search Auto Suggestion box with PHP MySQLi With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Search Suggestion with PHP/MySQLi and UI-Router Example

In this post we will show you Best way to implement Ajax Autocomplete textbox using AngularJS, PHP and MySQLi, hear for Dynamic Autocomplete search using AngularJS Typeahead with PHP with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Creating simple Database

First of all, Hello Friends I am Going to make simple Mysql database and some insert data for simple data options.
1. Simple open tab phpMyAdmin.
2. here Trigger databases, make a database and name it as live24u.
3. and then making a mysql database, Trigger the SQL and simple copy paste the below script.

CREATE TABLE `clients` (
  `clientid` int(11) NOT NULL AUTO_INCREMENT,
  `clientfname` varchar(30) NOT NULL,
  `clientlname` varchar(30) NOT NULL,
  `clientaddress` text NOT NULL,
PRIMARY KEY(`clientid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `clients` (`clientid`, `clientfname`, `clientlname`, `clientaddress`) VALUES
(1, 'Jagruti', 'Dethariya', 'Rajkot city'),
(2, 'Sejal', 'Ramani', 'bapasitaram chock'),
(3, 'pankil', 'butiya', 'Bohol'),
(4, 'nilesh ', 'chovatiya', 'om park'),
(5, 'Dharmesh ', 'Chavada', 'junagdh');

index.html

It is the main index file All The HTML view of simple web-app.

<!DOCTYPE html>
<html ng-app="liveApp">
<head>
	<title>Simple AngularJS Search Suggestion with PHP and MySQLi Example</title>
	<meta charset="utf-8">
	<!-- CDN For bootstrap.min.css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> rel="stylesheet">
<!-- CDN For  angular.min.js-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<!-- CDN For angular-ui-router.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<style type="text/css">
		.search-list{
		    background-color: #4cAE51; 
		    border: 2px solid #3d3d3d; 
		    color: #3d3d3d; 
		    padding: 11px 23px; 
		    cursor: pointer; 
		    width: 100%;
		    display: block;
			margin-top:2px;
		}
		.search-list:not(:last-child) {
    		border-bottom: none; 
		}
		.search-list a {
			text-decoration:none;
			color: #3d3d3d;
		}
		.no-search{
		    background-color: #4cAE51; 
		    border: 2px solid #3d3d3d; 
		    color: #3d3d3d; 
		    padding: 11px 23px;  
		    width: 100%;
		    display: block;
			margin-top:2px;
		}
	</style>  
</head>
<body>
<div class="live container">
	<h1 class="page-header text-center">Simple AngularJS Live Search Suggestion with PHP and MySQLi</h1>
	<div ui-view></div>
</div>
<script src="liveApp.js"></script>
</body>
</html>

liveApp.js

It is the main file liveApp.js script of simple web-application.

Also Read This 👉 PHP Vue.js Live Search Box Using MySQL

var liveApp = angular.module('liveApp', ['ui.router']);
 
liveApp.config(function($stateProvider, $urlRouterProvider) {
 
    $urlRouterProvider.otherwise('/dashboard');
 
    $stateProvider
 
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboard.html',
            controller: 'dashboardCtrl'
        })
 
        .state('client', {
            url: '/client/{client:json}',
            params: {client: null},
            templateUrl: 'client.html',
            controller: 'clientCtrl'
        })  
});
 
liveApp.controller('dashboardCtrl', function($scope, $http) {
    $scope.hasClient = false;
    $scope.noClient = false;
 
    $scope.fetch = function(){
        $http.get('do_fetch.php').success(function(data){
            $scope.clientLists = data;
        });
    }
 
    $scope.search = function(){
        if($scope.clkeywords == ''){
           $scope.hasClient = false;
            $scope.noClient = false;
        }
        else{
            $http.post('do_search.php', {
                'clkeywords': $scope.clkeywords
            })
            .success(function(data){
                if(data.length > 0){
                    $scope.clients = data;
                    $scope.hasClient = true;
                    $scope.noClient = false;
                }
                else{
                    $scope.noClient = true;
                    $scope.hasClient = false;
                }
            });
        }
    }
});
 
liveApp.controller('clientCtrl', function($scope, $stateParams) {
    $scope.clientdtl = $stateParams.client;
});

do_fetch.php

This is simple PHP Web api that Retrives data from simple simple MySQL database.

<?php
	$conn = new mysqli("localhost", "YOUR_USER_NAME", "YOUR_DATABASE_PASSWORD", "live24u");
	$myoutput = array();
	$sql = "SELECT * FROM clients";
	$query = $conn->query($sql);
	while($row=$query->fetch_array()){
		$myoutput[] = $row;
	}
	echo json_encode($myoutput);
?>

dashboard.html

Now, simple angular ui-router It is very main importnant displau as simple index view.

<div class="row">
	<div class="col-sm-6 col-sm-offset-1" ng-init="fetch()">
		<h3>Client List</h3>
		<table class="table table-bordered table-striped">
			<thead>
				<tr>
					<th>Client ID</th>
					<th>Your Firstname</th>
					<th>CL Lastname</th>
					<th>Full Address</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="clList in clientLists">
					<td>{{ clList.clientid }}</td>
					<td>{{ clList.clientfname }}</td>
					<td>{{ clList.clientlname }}</td>
					<td>{{ clList.clientaddress }}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="col-sm-4">
		<input type="text" class="form-control" ng-model="clkeywords" ng-keyup="search()" placeholder="Search for Client Firstname, Client Lastname or Client Address">	
		<div ng-repeat="client in clients" ng-show="hasClient" class="search-list">
			<a ui-sref="client({client: client})">{{ client.clientfname + ' ' + client.clientlname }}</a>
		</div>
		<div ng-show="noClient" class="no-search">
			No Search Suggestion Found
		</div>
	</div>
</div>

do_search.php

IT is simple PHP Web api that suggestion searches simple PHP to get MySQL database and returning the some related search match insearch.php file.

<?php
 
	$conn = new mysqli("localhost", "YOUR_USER_NAME", "YOUR_DATABASE_PASSWORD", "live24u");
	$myoutput = array();
	$data = json_decode(file_get_contents('php://input'));
	$clkeywords = $data->clkeywords;
 
	if(empty($clkeywords)){
		$myoutput = '';
	}
	else{
 
		$sql = "SELECT * FROM clients WHERE clientfname LIKE '%$clkeywords%' OR clientlname LIKE '%$clkeywords%' OR clientaddress LIKE '%$clkeywords%'";
		$query = $conn->query($sql);
 
		while($row=$query->fetch_array()){
			$myoutput[] = $row;
		}
	}
	echo json_encode($myoutput);
?>

client.html

Last step, It is where I Some HTML view the clientdtl of simple clicked suggestion search Data result.

<h2 class="text-center">Client Details</h1>
<div class="live col-sm-4 col-sm-offset-4">
<h3>Client ID: {{ clientdtl.clientid }}</h3>
<h3>Client Firstname: {{ clientdtl.clientfname }}</h3>
<h3>Client Lastname: {{ clientdtl.clientlname }}</h3>
<h3>Client Address: {{ clientdtl.clientaddress }}</h3>
 
<button type="button" ui-sref="dashboard" class="btn btn-success">Back</button>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is Ajax Autocomplete textbox using AngularJS, PHP and MySQLi And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.