Live search in php mysql using angular js

For live search like google instance search i am using simple angularjs library.
Angular js is simple javascript MVC framework code introduce by google team.
For more about angularjs please visit Angular tutorials

Step 1

Create following file structure
root(folder)
js(folder)
——————-angular.min.js
——————-app.js
——————-jquery.min.js
db_connect.php
index.html
search.php

Step 2

Create a mysql table for fetch search string data

CREATE TABLE IF NOT EXISTS `live_search` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`description` text NOT NULL,
`url` text NOT NULL,
`created` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
// some entries
INSERT INTO `live_search` (`id`, `title`, `description`, `url`, `created`) VALUES
(1, 'Introduction to codeignitor', 'Codeignitor is php based MVC framework. Its framework is so easy and popular.\r\n\r\nCI (codeignitor) use for building small and large database web application and also for small websites.\r\n\r\nIt is good and easy mvc structure for starter programmer.\r\n\r\nMVC stand for Model View Controller.\r\nIn a simple way when an end user comes to web app its firstly intract with view(simple php or html page) .', 'http://webrocom.net/introduction-to-codeignitor/', '2014-09-11'),
(2, 'create a simpe website using codeignitor', 'ollow the below steps for create a simple website using codeignitor.\r\n\r\nStep 1. Download the codeignitor and extract zip file. Now put codeignitor folder on server folder like(www or htdocs).\r\n\r\nStep 2. Configure your codeignitor webiste.\r\n\r\nopen file (config.php) under the directory application/config/config.php. and set base url and save file.', 'http://webrocom.net/create-a-simpe-website-using-codeignitor/', '2014-09-11'),
(3, 'codeignitor pagination using ajax', 'Before read this tutorials i want to tell you that i m not using any codeigniter pagination class. So its so simple and fast pagination skill and tips , just enjoy this snippet.\r\n\r\nCreate simple ajax pagination in codeigniter.  Lets follow this tutorial.\r\n\r\nDownload the codeigniter from here.  Now unzip the file and put this folder in your local server folder(www or htdocs).\r\n\r\nwe need to create a database table. so create a countries table in mysql database', 'http://webrocom.net/codeignitor-pagination-using-ajax/', '2014-09-15'),
(4, 'generate dynamic excel file using phpexcel in codeigniter', 'In this tutorial we learn how to generate a excel file in php codeigniter with help for php excel library. And excel data will come through mysql database.\r\nWe will also format the the text and row in excel file. So achieve this goal follow these steps.\r\nStep 1.\r\n\r\nDownload the codeigniter framework for codeigniter website and set up on local server. and config it.\r\nStep 2.', 'http://webrocom.net/generate-excel-file-using-phpexcel-in-codeigniter/', '2014-09-19'),
(5, 'ajax login system in php codeigniter', 'Create a simple ajax login system using codeigniter\r\n\r\n.\r\nStep 1.\r\n\r\nDownload codeigniter from codeigniter’s website and configure it on local server(www/htdocs).\r\nStep 2.\r\n\r\nwe are using authentication process so create a mysql table(auth).', 'http://webrocom.net/ajax-login-system-php-codeigniter/', '2014-09-24'),
(6, 'delete multiple record based on checkbox using ajax in php codeigniter', 'Today we are going to built a interesting codeigniter code snippet. “How to delete multiple recodes based on checkbox selection in php codeigniter”, so achieve this goal just follow below steps.\r\nStep 1.\r\n\r\nDownload codeigniter framework then unzip the folder using winzip or winrar and then put the framework folder in local server(htdocs or www).\r\nStep 2.\r\n\r\nSet up basic configuration.\r\nupdate the config.php under the directory(application/config/)', 'http://webrocom.net/delete-multiple-recoed-based-checkbox-using-ajax-php-codeigniter/', '2014-10-06'),
(7, 'Facebook Login using javascript sdk', ' Its is very interesting and simple way to create a login flow using facebook api in our web app. So lets enjoy this code.\r\nStep 1.\r\n\r\nCreate a directory structure like this:\r\nroot\r\n——-index.php\r\n——-home.php\r\n——-fb.js\r\nStep 2.\r\n\r\nBefore starting your code you have to create a facebook app.\r\nhere is link Create a facebook app\r\nPlease follow facebook app developer guide line.\r\nAfter finishing this app move to step 3.', 'http://webrocom.net/facebook-login-using-javascript-sdk/', '2014-10-07');

Step 3

Now connect to database. So write some code in db_connect.php.

<?php
$link = mysqli_connect("localhost","your db user name", "your db password","your database") or die('could not connect to database');

Step 4

Now we will create heart of this application. so paste following code in app.js

PATH = 'search.php';
var app = angular.module("myApp",[]);
//live search controller for welcome view and welcome controller
app.controller('SearchController', function($scope, $http){
$scope.url = 'search.php'; // the get request page
$scope.search = function (){
//create the http post request
//the data holds the search key
//the request is a json request
$http.post($scope.url,
{"data":$scope.keybords}
).success(function (data, status){
$scope.status = status;
$scope.data = data;
$scope.result = data;
}).error(function (data, status){
$scope.data = data || "Request Failed";
$scope.status = status;
});
};
});

Step 5

In step 5 paste following code in search.php

<?php
require_once './db_connect.php';
$data = file_get_contents("php://input");
$objData = json_decode($data);
$key =  $objData->data;
if(!empty($key)){
$sql = "SELECT * from live_search where title LIKE '%$key%' ";
$result =   mysqli_query($link, $sql) or die(mysqli_error($link));
$output = array();
while ($row = mysqli_fetch_array($result)) {
$output[] = $row;
}
echo json_encode($output);
}
?>

So at last hit the url localhost/your app folder. and enjoy the live search code. The main feature of this app is very fast because we are using angular js.
If you are getting any error please comment or mail me. Thanks for reading this tutorial (a3oxbloggers)

Live search in php mysql using angular js.

Contact for PHP Mysql, Codeigniter, Laravel, symfony, NodeJS, AngularJS, ReactJS training in mumbai.
Weekend Classes available.
Call me on 9022349606.

Team Webrocom.