RadAutoCompleteTextView: Display Modes

RadAutoCompleteTextView has two predefined display modes.

• Plain
• Tokens

Display mode can be changed with the displayMode property of the RadAutoCompleteTextView. The default value is Plain.

The next code snippet shows how to change that default value to Tokens:

<RadAutoCompleteTextView [items]="dataItems" displayMode="Tokens" showCloseButton="false">
    <SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
        <ng-template tkSuggestionItemTemplate let-item="item">
            <StackLayout orientation="vertical" padding="10">
                <Label [text]="item.text"></Label>
            </StackLayout>
        </ng-template>
    </SuggestionView>
</RadAutoCompleteTextView>

import { Component } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-ui-autocomplete";

@Component({
    moduleId: module.id,
    selector: "tk-autocomplete-tokens-mode",
    templateUrl: "autocomplete-tokens-mode.component.html"
})
export class AutoCompleteTokensModeComponent {
    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();
    }

    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));
        }
    }
}

Plain mode

In plain mode the RadAutoCompleteTextView displays chosen item as plain text. When this mode only one item can be chosen.

Tokens mode

Tokens mode allows multiple choice of items. Chosen items are displayed as tokens which can be modified or completely changed with custom ones.

When RadAutoCompleteTextView is working in DisplayMode.Tokens mode, you can apply two different behaviors for token arrangement.

• Horizontal
• Wrap

The layout mode of the tokens can be changed with the layoutMode property. The default value is of this property is Wrap.

<RadAutoCompleteTextView [items]="dataItems" layoutMode="Wrap" displayMode="Tokens">
    <SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
        <ng-template tkSuggestionItemTemplate let-item="item">
            <StackLayout orientation="vertical" padding="10">
                <Label [text]="item.text"></Label>
            </StackLayout>
        </ng-template>
    </SuggestionView>
</RadAutoCompleteTextView>

import { Component } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-ui-autocomplete";

@Component({
    moduleId: module.id,
    selector: "tk-autocomplete-layouts-wrap",
    templateUrl: "autocomplete-layouts-wrap.component.html"
})
export class AutoCompleteLayoutsWrapComponent {
    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();
    }

    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));
        }
    }
}

Wrap layout

In wrap mode tokens are arranged on multiple lines. Every time a new line is started the RadAutoCompleteTextView is expanding in order to show all tokens.

Horizontal layout

In horizontal layout tokens are displayed on single line which can be scrolled horizontally in order to display all tokens.

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.

• RadAutoCompleteTextView Examples

Related articles you mind find useful:

• Completion Modes
• Suggest Modes