AngularJS Search Auto Suggestion box with PHP MySQLi
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.
Simple AngularJS Search Suggestion with PHP and MySQLi Example rel="stylesheet">Simple AngularJS Live Search Suggestion with PHP and MySQLi
liveApp.js
It is the main file liveApp.js script of simple web-application.
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.
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.
Client List
Client ID Your Firstname CL Lastname Full Address {{ clList.clientid }} {{ clList.clientfname }} {{ clList.clientlname }} {{ clList.clientaddress }} No Search Suggestion Found
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.
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.
Client Details
Client ID: {{ clientdtl.clientid }}
Client Firstname: {{ clientdtl.clientfname }}
Client Lastname: {{ clientdtl.clientlname }}
Client Address: {{ clientdtl.clientaddress }}
You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs ExampleI 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.