Angular For Dummies : Implement Instant Search

Disclaimer : This blog post is case sensitive && Contains updates below the post

Angular is replacing hard coded Ajax these days and its been a very good option as a jQuary alternatively. Honestly Angular and jQuery are two different things, Angular is a framework whole jQuery functions as a library, they have separate functionalities but most people who were depending on jQuery for everything is now coming to Angular because of some good builtin things in Angular such as templating, data binding and routing capabilities in single page apps.

I am not an Angular fanatic (updated on 2017 Oct 16), but trying and experimenting something so I can learn the things. In this blog I am going to discuss about a Google Instant search like implementation in Angular.
ng1
This is a very simple HTML code I got from W3Schools and added some modifications. What this does is… TRY IT 🙂 Lets have a look at the code. Here I have a controller customersCtrl for the app myApp. The functionality of the controller is to fetch results from the URL http://www.w3schools.com/angular/customers.php go to the page and see how its formatted. This is how Angular fetch and decode JSON. The method we are using is $http.get. In case you are wondering what is an $http. Angular has a good documentation for it. On success callback on $http.get the controller created an application object property names. Remember $scope is the application object and $scope.names is its property which stores names which contains the records from the response we get from the $http.get call. Now lets move to the DOM manipulation, typically we call it a View. There what happens is, we put a repeater with ng-repeat which repeats the items from names this is the same property that was previosuly $scope.names and its filtered with ng-model which is name which gets the Name from the response. Finally it will list Country which have the Name. Try this code and try to implement your own, so you will get a very clear picture.

Update 1

The above code uses Angular JS 1.3.14. .success() and .error() methods of $http.get were removed in Angular 1.6. Now we need to use the standard JS promises pattern. So, if you are using Angular 1.6 + the code will be like below
ng2
So the main change here is the standard JS promises practice along with response.data is what gives us the data.

Update 2

You need to have a customers.php to be served in localhost for the above examples. Initially I was using the customers.php from W3Schools, but with the new CORS issue, it is not possible to get it. So make a customers.php as below with CORS support.


<?php
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
        header('Access-Control-Allow-Headers: token, Content-Type');
        header('Access-Control-Max-Age: 1728000');
        header('Content-Length: 0');
        header('Content-Type: text/plain');
        die();
    }

    header('Access-Control-Allow-Origin: *');
    header('Content-Type: application/json');
	
	$person1 = [
		'Name' => 'Alfreds Futterkiste',
		'City' => 'Berlin',
		'Country' => 'Germany',
	];
	$person2 = [
		'Name' => 'Ana Trujillo Emparedados y helados',
		'City' => 'México D.F.',
		'Country' => '"Mexico"',
	];
	$person3 = [
		'Name' => 'Alfreds Futterkiste',
		'City' => 'Berlin',
		'Country' => 'Germany',
	];
	$person4 = 
	[  
		'Name'=>'Around the Horn',
		'City'=>'London',
		'Country'=>'UK'
	];
	$person5 = 
	[  
		'Name'=>'B s Beverages',
		'City'=>'London',
		'Country'=>'UK'
	];
	$person6 = 
	[  
		'Name'=>'Berglunds snabbköp',
		'City'=>'Luleå',
		'Country'=>'Sweden'
	];
	$person7 = 
	[  
		'Name'=>'Blauer See Delikatessen',
		'City'=>'Mannheim',
		'Country'=>'Germany'
	];
	$person8 = 
	[  
		'Name'=>'Blondel père et fils',
		'City'=>'Strasbourg',
		'Country'=>'France'
	];
	$person9 = 
	[  
		'Name'=>'Bólido Comidas preparadas',
		'City'=>'Madrid',
		'Country'=>'Spain'
	];
	$person10 = 
	[  
		'Name'=>'Bon app',
		'City'=>'Marseille',
		'Country'=>'France'
	];
	$person11 = 
	[  
		'Name'=>'Bottom-Dollar Marketse',
		'City'=>'Tsawassen',
		'Country'=>'Canada'
	];
	$person12 = 
	[  
		'Name'=>'Cactus Comidas para llevar',
		'City'=>'Buenos Aires',
		'Country'=>'Argentina'
	];
	$person13 = 
	[  
		'Name'=>'Centro comercial Moctezuma',
		'City'=>'México D.F.',
		'Country'=>'Mexico'
	];
	$person14 = 
	[  
		'Name'=>'Chop-suey Chinese',
		'City'=>'Bern',
		'Country'=>'Switzerland'
	];
	$person15 = 
	[  
		'Name'=>'Comércio Mineiro',
		'City'=>'São Paulo',
		'Country'=>'Brazil'
	];
	
    $ret = [
        'records' => array($person1,$person2, $person3, $person4, $person5, $person6, $person7, $person8, $person9, $person10, $person11, $person12, $person13, $person14, $person15)
    ];
    print json_encode($ret);

Get the gist here
 

Advertisements

One thought on “Angular For Dummies : Implement Instant Search

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s