pigallery2/frontend/app/gallery/search/search.gallery.component.ts

///<reference path="../../../browser.d.ts"/>

import {Component} from "@angular/core";
import {AutoCompleteService} from "./autocomplete.service";
import {AutoCompleteItem} from "../../../../common/entities/AutoCompleteItem";
import {Message} from "../../../../common/entities/Message";

@Component({
    selector: 'gallery-search',
    templateUrl: 'app/gallery/search/search.gallery.component.html',
    styleUrls: ['app/gallery/search/search.gallery.component.css'],
    providers: [AutoCompleteService]
})
export class GallerySearchComponent {

    autoCompleteItems:Array<AutoCompleteRenderItem> = [];

    constructor(private _autoCompleteService:AutoCompleteService) {
    }

    getSuggestions(event:KeyboardEvent) {
        let searchText = (<HTMLInputElement>event.target).value;
        if (searchText.trim().length > 0) {
            this._autoCompleteService.autoComplete(searchText).then((message:Message<Array<AutoCompleteItem>>) => {
                if (message.error) {
                    //TODO: implement
                    console.error(message.error);
                    return;
                }
                this.showSuggestions(message.result, searchText);
            });
        } else {
            this.emptyAutoComplete();
        }
    }

    private showSuggestions(suggestions:Array<AutoCompleteItem>, searchText:string) {
        this.emptyAutoComplete();
        suggestions.forEach((item)=> {
            let preIndex = item.text.toLowerCase().indexOf(searchText.toLowerCase());
            let renderItem = new AutoCompleteRenderItem();
            if (preIndex > -1) {
                renderItem.preText = item.text.substring(0, preIndex);
                renderItem.highLightText = item.text.substring(preIndex, preIndex + searchText.length);
                renderItem.postText = item.text.substring(preIndex + searchText.length);
            } else {
                renderItem.postText = item.text;
            }
            this.autoCompleteItems.push(renderItem);
        });
    }

    public onFocusLost(event) {
        this.autoCompleteItems = [];
    }

    private emptyAutoComplete() {
        this.autoCompleteItems = [];
    }


}

class AutoCompleteRenderItem {
    constructor(public preText:string = "", public  highLightText:string = "", public postText:string = "") {

    }
}