This tutorial begins by showing you how to get a list of Customers using Backand’s REST API while populating ng-grid. Next you will filter the list of Customers based on Title. And finally, as you type in the filter box you will use Typeahead to pre-populate the list with Titles by getting autocomplete data from Backand’s REST API.

1. Learn How to Implement Typeahead
with ng-grid
A few weeks ago we posted a blog series entitled ng-grid and
REST API. In the first blog you were given step-by-step instruction
on how to build ng-grid with a Simple REST. In the second blog
you learned how to use a Real REST when creating ng-grid. In
this blog post, we will continue the series by showing you how
to implement Typeahead by using the Real REST API.
Objective
This tutorial begins by showing you how to get a list of Customers using
Backand’s REST API while populating ng-grid. Next you will filter the list of
Customers based on Title. And finally, as you type in the filter box you will
use Typeahead to pre-populate the list with Titles by getting autocomplete
data from Backand’s REST API. The end result will look something like this:
You can also see it up and
running here in Plunker before
going through the tutorial.
www.backand.com

2. Assumptions
1. You have gone through the ng-grid blog post which explains how to set
up ng-grid with Backand’s REST service.
2. You will use Backand’s REST service. For production projects please
register at http://www.backand.com/ and follow the steps in connecting
your database.
Typeahead
Typeahead is a feature where in you get a pre-populated list of items as soon
as you enter data into a text box – similar to Google’s search box. For this
tutorial post you will use Angular-ui’s Typeahead directive.
The first step you need to do is include Angular-ui’s JS library which has the
Typeahead directive.
Index.html:
You also need to add ‘ui-bootstrap’ Angular module dependency to our main
module.
script.js:
Backand autocomplete API
Backand has an autocomplete API where you pass a query term along with
the intended object. This API will then return an array of results based on
the search query. The autocomplete API looks like this when you query for a
Job_Title on Customers:
www.backand.com

3. Let’s start by writing actual code on top of your ng-grid (see this previous
blog post to get your started).
In the previous blog, you get Employee details from Backand’s REST service.
In this example, you will now get Customer details. Also some of ng-grid’s
features can be cut down for Typeahead as you don’t need the create/update/
delete functionality. Let’s strip down ng-grid as follows:
Now, let’s change the service code to look as follows:
www.backand.com

4. www.backand.com

5. You need to update the controller code to authenticate the user and get
customer details as soon as the controller is instantiated. Let’s add the
following code to controller to authenticate the user and fill up the grid with
customer data.
The above lines of code make sure that as soon as this controller is instantiated,
the user is authenticated; customer details are obtained.
Now let’s add an <input /> tag that can act as the Typeahead to show the
matching customer titles on text enter.
The Typeahead directive looks for a value similar to the ng-repeat directive.
As soon as this controller is instantiated and there is a value on the input
tag, getCustomerTitles() function will be called with the current value in the
input tag. And your controller code makes an asynchronous call to Backand’s
autocomplete API using the backandService to get the autocomplete data.
And Typeahead allows you to pass a function name that will be called
when the user selects an item inside the Typeahead dropdown. This is the
typeahead-on-select attribute. Let’s create a method in your controller to
hook the text from the input tag and filter the ng-grid so that only Customers
with matching title are shown in the grid.
www.backand.com

6. We already added a filterOptions property to our gridOptions while setting
up ng-grid. So as soon as the filterOptions object is updated, ng-grid is also
updated to show filtered data.
Your Typeahead filter and ng-grid are working perfectly right now. But if you
look deep there is a problem. If the user clears the input filter, ng-grid doesn’t
update. This is because you are only updating the grid when the user selects
a dropdown value from Typeahead. Now you need to be able to give an option
to clear the filter applied on the grid. Let’s add a <button /> that says “clear”
which will clear the filterOptions when the user clicks it.
Add a “clearFilter()” method in the controller to do the necessary actions on
the filterOptions.
Now it’s all wired up nice and good. When the user enters something into
the input filter box, a list of matches will be shown by getting the data from
Backand’s autocomplete API using the Typeahead directive. When an option
is selected from the list given by Typeahead, you apply the filter on the list of
customers to show only the customers with matching title. And you can also
remove the filtered information from the grid when pressing the clear button.
There you go. Typeahead with ng-grid using Backand’s REST service.
www.backand.com

7. References
ng-grid Documentation: http://angular-ui.github.io/ng-grid/
Typeahead: http://angular-ui.github.io/bootstrap/#/typeahead
Plunker Code: http://plnkr.co/edit/uMXjvK?p=preview
Build your Bootstrap + Angular app with Backand today. – Get started now.
www.backand.com
Contact Information
Backand Inc.
info@backand.com
www.backand.com