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-telerik-ui-pro/autocomplete" for Telerik UI for NativeScript (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 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 "data/observable-array";
import autocompleteModule = require("nativescript-telerik-ui-pro/autocomplete");
import observableModule = require("ui/core/dependency-observable");

export class ViewModel {

    private _items: ObservableArray<autocompleteModule.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"];

    get dataItems() {
        return this._items;
    }

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

        for (var i = 0; i < this.countries.length; i++) {
            this._items.push(new autocompleteModule.TokenModel(this.countries[i],undefined));
        }
    }
}
var observable_array_1 = require("data/observable-array");
var autocompleteModule = require("nativescript-telerik-ui-pro/autocomplete");
var observableModule = require("ui/core/dependency-observable");
var ViewModel = (function () {
    function ViewModel() {
        this.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"];
    }
    Object.defineProperty(ViewModel.prototype, "dataItems", {
        get: function () {
            return this._items;
        },
        enumerable: true,
        configurable: true
    });
    ViewModel.prototype.initDataItems = function () {
        this._items = new observable_array_1.ObservableArray();
        for (var i = 0; i < this.countries.length; i++) {
            this._items.push(new autocompleteModule.TokenModel(this.countries[i], undefined));
        }
    };
    return ViewModel;
}());
exports.ViewModel = ViewModel;

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 repo on Github.