sschueller sschueller - 1 year ago 111
reST (reStructuredText) Question

How to use ng2-bootstrap Typahead with REST backend

How do I do a typeahead with a REST service as source in Typescript? Do I need to use a promise or can I use observables? Specifically I am looking for what I need in the getAsyncData() function from the example at the ng2-bootstrap homepage.

REST Response:

[{id: 1, name: 'Alabama'}, {id: 2, name: 'Alaska'}, {id: 3, name: 'Arizona'},{id: 4, name: 'Arkansas'}, {id: 5, name: 'California'}]

What I have (doesn't work):


import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {TYPEAHEAD_DIRECTIVES} from '../../../ng2-bootstrap';
import {Http,URLSearchParams,Headers} from 'angular2/http';

// webpack html imports
let template = require('./typeahead-demo.html');

selector: 'typeahead-demo',
template: template

export class TypeaheadDemo {
public selected:string = '';
public asyncSelected:string = '';
public typeaheadLoading:boolean = false;
public typeaheadNoResults:boolean = false;
public states:Array<string> = [];
public statesComplex:Array<any> = [];

public getContext() {
return this;

public _cache:any;
public _prevContext:any;

public constructor(public http:Http) {}

public getAsyncData(context:any):Function {
if (this._prevContext === context) {
return this._cache;
this._prevContext = context;
let f:Function = function (http:Http) {
let searchParams = new URLSearchParams();
searchParams.set('search', context.asyncSelected);
http.get('', {search: searchParams})
.subscribe(res => {
context.states = res.json();
this._cache = f(this.http);
return this._cache;

public changeTypeaheadLoading(e:boolean) {
this.typeaheadLoading = e;

public changeTypeaheadNoResults(e:boolean) {
this.typeaheadNoResults = e;

public typeaheadOnSelect(e:any) {
console.log(`Selected value: ${e.item}`);


<div class='container-fluid'>
<pre>Model: {{asyncSelected | json}}</pre>
<input [(ngModel)]="asyncSelected"
placeholder="Locations loaded with timeout"
<div [hidden]="typeaheadLoading!==true">
<i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
<div [hidden]="typeaheadNoResults!==true" class="" style="">
<i class="glyphicon glyphicon-remove"></i> No Results Found

Answer Source

I was able to get it working thanks to a reply on github from yannickadam:


public autoCompleteRef = this.autoComplete.bind(this);

public autoComplete() {
    let headers = new Headers();
    headers.append('Authorization', 'Bearer ' + this.authservice.getToken());

    let searchParams = new URLSearchParams();
    searchParams.set('search', this.autoCompleteSearchTerm);

    return this.http.get(this.api_url, {search: searchParams, headers: headers})
        .map(res => res.json())
        .map((el)=> {
            return> {
                return ({id:, name:}); // unnecessary as format is the same in this case


<input class="form-control"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download