RadAutoCompleteTextView: Getting Started

In this article, you will learn how to initialize RadAutoCompleteTextView and use it with it's basic configuration inside an NativeScript + Angular applications.

Initialization

Before proceeding make sure that the NativeScriptUIAutoCompleteTextViewModule from the nativescript-telerik-ui plugin has been added to your app's ngModule, more details can be found here.

To create a functional RadAutoCompleteTextView you should:

  • Place the RadAutoCompleteTextView tag in your component's HTML
  • Once you have added it next you should specify the value for the items property. That property defines the collection of TokenModel objects which will be used to provide suggestions on user input. The TokenModel object is a data model used by the autocomplete to populate the suggestion view and the chosen items. Simply create a list of such objects in your component's code and bind it to the items property.
  • Next you would like to specify the the suggestion list of the RadAutoCompleteTextView by adding an SuggestionView between the RadAutoCompleteTextView tags and setting the tkAutoCompleteSuggestionView inline directive to it.
  • All that is left is to specify the template of the of the SuggestionView by adding an default Angular template structural directive between the SuggestionView tags. In order to attach that template to the RadAutoCompleteTextView simply add the tkSuggestionItemTemplate inline directive to the ng-template.
<RadAutoCompleteTextView #autocmp [items]="dataItems" suggestMode="Suggest" displayMode="Tokens">
    <SuggestionView tkAutoCompleteSuggestionView>
        <ng-template tkSuggestionItemTemplate let-item="item">
            <StackLayout orientation="vertical" padding="10">
                <Label [text]="item.text"></Label>
            </StackLayout>
        </ng-template>
    </SuggestionView>
</RadAutoCompleteTextView>
import { Component, ViewChild } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-telerik-ui-pro/autocomplete";
import { RadAutoCompleteTextViewComponent } from "nativescript-telerik-ui-pro/autocomplete/angular";

@Component({
    moduleId: module.id,
    selector: "tk-autocomplete-getting-started",
    templateUrl: "autocomplete-getting-started.component.html"
})
export class AutoCompleteGettingStartedComponent {
    private _items: ObservableArray<TokenModel>;
    private countries = ["Australia", "Albania", "Austria", "Argentina", "Maldives", "Bulgaria", "Belgium", "Cyprus", "Italy", "Japan",
        "Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland",
        "Latvia", "Luxembourg", "Macedonia", "Moldova", "Monaco", "Netherlands", "Norway",
        "Poland", "Romania", "Russia", "Sweden", "Slovenia", "Slovakia", "Turkey", "Ukraine",
        "Vatican City", "Chad", "China", "Chile"];

    constructor() {
        this.initDataItems();
    }

    @ViewChild("autocmp") autocmp: RadAutoCompleteTextViewComponent;

    get dataItems(): ObservableArray<TokenModel> {
        return this._items;
    }

    private initDataItems() {
        this._items = new ObservableArray<TokenModel>();

        for (var i = 0; i < this.countries.length; i++) {
            this._items.push(new TokenModel(this.countries[i], undefined));
        }
    }
}

The suggestionViewHeight property allows you to have control over the height of the suggestion view.

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.