🥳 NativeScript 6.0 is here! Learn all about it at our launch webinar.

NativeScript Core

RadAutoCompleteTextView Getting Started

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

Installation

RadAutoCompleteTextView is distributed through the nativescript-ui-autocomplete package, so before using it, you need to run the following command to add the plugin to your application:

tns plugin add nativescript-ui-autocomplete

Initialization

Then, in order to add a RadAutoCompleteTextView instance in a page of your application, you need to define the following XML namespace:

  • xmlns:au="nativescript-ui-autocomplete"

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.

<au:RadAutoCompleteTextView id="autocomplete" items="{{ dataItems }}" displayMode="Tokens"/>

In order to provide suggestions that will be used by RadAutoCompleteTextView you need to provide a collection of items of type TokenModel:

import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-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 (let i = 0; i < this.countries.length; i++) {
            this.dataItems.push(new TokenModel(this.countries[i], undefined));
        }
    }
}

If necessarily, you can also use RadAutoCompleteTextView's hint property to provide a text that will be displayed when there is no input; the text property that allows you to change the text or get the current user input or the noResultsText property to change the text displayed when no suggestions are found.

Customize the Suggestions

When you start typing the input field, you will see the default suggestion view displayed below the input field. If you want, you can add a custom suggestion view and change its template (through the suggestionItemTemplate property) and/or fix its height (through the suggestionViewHeight property). Here's an example:

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

Customize the TokenModel

If you need, you can extend the TokenModel with an id to track more easily the selected items or any other information that you need that is missing from the default model. Here's an example:

export class CityModel extends TokenModel {
    public id: number;
    public city: string;
    public country: string;
    constructor(id: number, city: string, country: string, image: string) {
        super(city + ", " + country, image);

        this.id = id;
        this.city = city;
        this.country = country;
    }

    toString() {
        return this.id + ": " + this.city + ", " + this.country;
    }
}

Then you can use the new type to populate the list of items that will be bound to RadAutoCompleteTextView's items property:

private initDataItems() {
    if (!this.dataItems) {
        this.dataItems = new ObservableArray<CityModel>();
        for (let i = 0; i < data.items.length; i++) {
            const d = data.items[i].flag;
            const ds = "res://" + d;
            this.dataItems.push(new CityModel(data.items[i].id, data.items[i].city, data.items[i].country, ds));
        }
    }
}

You can also display the properties added to your custom model in the template of the suggestions:

<au:RadAutoCompleteTextView.suggestionView>
    <au:SuggestionView>
        <au:SuggestionView.suggestionItemTemplate>
            <GridLayout columns="auto, *">
                <Image src="{{ image }}" marginLeft="10" width="50" verticalAlignment="center"></Image>
                <Label text="{{ city }}" marginLeft="10" col="1" verticalAlignment="center"></Label>
                <Label text="{{ country }}" marginRight="10" col="1" verticalAlignment="center" textAlignment="right"></Label>
            </GridLayout>
        </au:SuggestionView.suggestionItemTemplate>
    </au:SuggestionView>
</au:RadAutoCompleteTextView.suggestionView>

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.