RadAutoCompleteTextView: Getting Started

In this article, you will learn how to initialize RadAutoCompleteTextView and use it with it's basic configuration.

Initialization

First of all, you need to define the following namespace on your XML root to be able to access the RadAutoCompleteTextView:

  • xmlns:au="nativescript-pro-ui/autocomplete" for Progress NativeScript UI (Pro)

To create a RadAutoCompleteTextView you should use the RadAutoCompleteTextView tag in your .xml file.
Once you have added the tag you should specify value for the items property of the control.
The items property defines the collection of TokenModel objects which will be used to provide suggestions to the user input.
The hint property allows you to provide a text that will be displayed when there is no input.
The TokenModel object is a data model used by the autocomplete to populate the suggestion view and the chosen items.

<au:RadAutoCompleteTextView items="{{ dataItems }}"/>

Additionally you need to create, in your model, the collection of TokenModel objects which will be used to populate the RadAutoCompleteTextView.

import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-pro-ui/autocomplete";
import { Observable } from "tns-core-modules/data/observable";

export class ViewModel extends Observable {
    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"];

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

    set dataItems(value: ObservableArray<TokenModel>) {
        this.set("_dataItems", value);
    }

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

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

In order to setup the suggestion view, which will be used as a holder to show possible suggestion, you need to add a SuggestionView tag and then provide a template for the layout of each suggestion.

<au:RadAutoCompleteTextView.suggestionView>
    <au:SuggestionView suggestionViewHeight="300">
        <au:SuggestionView.suggestionItemTemplate>
            <StackLayout orientation="vertical">
                <Label text="{{ text }}"></Label>

            </StackLayout>
        </au:SuggestionView.suggestionItemTemplate>
    </au:SuggestionView>
</au:RadAutoCompleteTextView.suggestionView>

The suggestionViewHeight property allows you to have control over the height of the suggestion view.
The suggestionItemTemplate is the holder which is used to produce layout for each item of the suggestion view.

References

Want to see more examples using RadAutoCompleteTextView?
Check our SDK examples repository on GitHub. You will find this and a lot more practical examples with NativeScript UI.