🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming webinar.

NativeScript Core

RadAutoCompleteTextView Getting Started

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


Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-autocomplete


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. 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 text property allows you to change the autocomplete text or get the current user 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-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));

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:SuggestionView suggestionViewHeight="300">
            <StackLayout orientation="vertical">
                <Label text="{{ text }}"></Label>

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.


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.