Typeahead

O Typeahead tem como objectivo facilitar a exploração de dados em cenários de autocomplete como, por exemplo, pesquisas.

A directiva Typeahead tem os seguintes parâmetros:

Propriedade	Tipo	Valor por defeito	Descrição
priTypeahead	Observable	[]	Observable onde é disponibilizada uma lista de objectos.
priTypeaheadItemTemplate	TemplateRef	null	Template para as linhas dos resultados.
priTypeaheadAnchorElement	any	null	Elemento html para o Typeahead usar como referência de localização.
priTypeaheadClass	string	null	Class personalizada para alterar estilo.
priTypeaheadMinWidth	string	null	Largura minima em px.
priTypeaheadDismiss	EventEmitter<any>	null	Evento para fechar o typeahead.
priTypeaheadOnSelect	EventEmitter<any>	EventEmitter	Evento que deve ser subscrito pelo componente que está a usar o typeahead para receber o elemento selecionado.

Exemplo

O seguinte código exemplifica o uso do componente typeahead no contexto de um campo input de pesquisa.

<!-- Typeahead row template -->
<ng-template #itemTemplate let-item0="item0" let-item1="item1" let-item2="item2" let-item3="item3">
    <div class="col-xs-12">{{item0}}</div>
    <div class="col-xs-12">{{item1}}</div>
    <div class="col-xs-12">{{item2}}</div>
    <div class="col-xs-12">{{item3}}</div>
</ng-template>

<!-- Input where the user type the text to search -->
<input #input
    [priTypeahead]="typeaheadDataSource"
    [priTypeaheadItemTemplate]="typeaheadItemTemplate"
    [priTypeaheadAnchorElement]="typeaheadAnchorElement"
    priTypeaheadClass="pri-custom-typeahead"
    priTypeaheadMinWidth="250px"
    (priTypeaheadOnSelect)="typeaheadOnSelect($event)"
    [priTypeaheadDismiss]="typeaheadDismiss"
    (keydown)="doSearch($event.target.value)"
>

``` typescript class ExampleComponent { private _typeaheadDataSource : EventEmitter; private _typeaheadDismiss: EventEmitter;

@ViewChild("input") input: ElementRef;
@ViewChild("itemTemplate") typeaheadItemTemplate: TemplateRef<any>;

get typeaheadDataSource(): Observable<any> {

    if (!this._typeaheadDataSource) {
        this._typeaheadDataSource = new EventEmitter();
    }

    return this._typeaheadDataSource;
}

get typeaheadDismiss(): EventEmitter<any> {

    if (!this._typeaheadDismiss) {
        this._typeaheadDismiss = new EventEmitter();
    }

    return this._typeaheadDismiss;
}

get typeaheadAnchorElement(): any {
    return this.input;
}

constructor(private searchService:SearchService) {
}

private doSeach(searchTerm: string): void {
    this.searchService.search(searchTerm).subscribe((res)=>{

        if(res && res.data) {
            // The object type on this array will match the properties on
            // the provided template.
            // The Object can have any properties, but they need to match the variabled used
            // on the template.
            let items : { item0:string, item1:string, item2:string, item3:string }[];

            items = res.data.map((x)=>{ 
                return {
                    item0: x.title,
                    item1: x.description,
                    item2: x.valueA,
                    item3: x.valueB
                }
            });

            // provides the items to typeahead
            this.typeaheadDataSource.emit(items);
        }
    });
}

// this method will be called when the select event is fired on typeahead
private typeaheadOnSelect(item: any): void {
    console.log("selected item: ", item);

    // emit event to close the typeahead
    this.typeaheadDismiss.emit();
}

}