Back to blog home page

Learn How to Implement Typeahead with ng-grid

Posted by on Oct 28, 2014

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:

Typeahead and ng-grid

You can also see it up and running here in Plunker before going through the tutorial.

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:

Job_Title query
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:

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.

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.

Typeahead with ng-grid and REST

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.Фото большой груди

читать чужие письмабесплатный анонимайзер для одноклассников и вконтактеescourt