Live Search Bar Like Google Using AngularJS
In this tutorial for ‘Live search like google using angularjs’, we are using simple angularjs library.
Angular js is a simple javascript MVC framework code developed by google team. For more about angularjs please visit our Angular tutorials.
Project Screenshot:
STEP 1:
Create the 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 to fetch search string data.
[code]
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 it firstly interacts with view(simple php or html page) .’, ‘https://www.mehulprajapati.comintroduction-to-codeignitor/’, ‘2014-09-11’),
(2, ‘create a simpe website using codeignitor’, ‘Follow 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.’, ‘https://www.mehulprajapati.comcreate-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’, ‘https://www.mehulprajapati.comcodeignitor-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.’, ‘https://www.mehulprajapati.comgenerate-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).’, ‘https://www.mehulprajapati.comajax-login-system-php-codeigniter/’, ‘2014-09-24’),
(6, ‘delete multiple record based on checkbox using ajax in php codeigniter’, ‘Today we are going to make an interesting codeigniter code snippet. “How to delete multiple recodes based on checkbox selection in php codeigniter”, so to 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/)’, ‘https://www.mehulprajapati.comdelete-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.’, ‘https://www.mehulprajapati.comfacebook-login-using-javascript-sdk/’, ‘2014-10-07’);
[/code]
STEP 3.
Now connect to database. So write some code in db_connect.php.
[php]
<?php
$link = mysqli_connect("localhost","your db user name", "your db password","your database") or die(‘could not connect to database’);
[/php]
STEP 4.
Now we will create heart of this application. so paste following code in app.js
[php]
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;
});
};
});
[/php]
STEP 5.
In step 5, paste the following code in search.php
[php]
<?php require_once ‘./db_connect.php’; $data = file_get_contents("php://input"); $objData = json_decode($data); $key = $objData-&gt;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); } ?>
[/php]
Finally run your code by typing your url localhost/your app folder. And enjoy the live search code. The main advantage of using angular js in this application is because it is very fast and instant.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Facebook Wall System Using Angular JS with Multiple Bindings Tutorial
- AngularJS TO-DO List Application
- Angular Create Read Update Delete Tutorial
- AngularJS Instant Search Example
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Angular Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.
5. IOS Training Institute in Mumbai.