RadAutoCompleteTextView Suggest Modes

RadAutoCompleteTextView has three different modes for providing suggestions.

• Suggest
• Append
• SuggestAppend

The suggest mode can be changed with the suggestionMode property of the RadAutoCompleteTextView. The default value is Suggest.

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

<RadAutoCompleteTextView [items]="dataItems" suggestMode="Append" displayMode="Plain">
    <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-append-mode",
    templateUrl: "autocomplete-append-mode.component.html"
})
export class AutoCompleteAppendModeComponent {
    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 (let i = 0; i < this.countries.length; i++) {
            this._items.push(new TokenModel(this.countries[i], undefined));
        }
    }
}

Suggest Mode

In Suggest mode the autocomplete represents the filtered suggestions, matching the typed text, in a pop-up view, which contains list of the suggestions.

Append Mode

In Append mode the autocomplete shows only the first suggestion matching the typed text, which is represented as direct suffix of the typed text.

Suggest-Append Mode

In SuggestAppend mode the autocomplete combines both upper-mentioned modes. It shows all matching suggestions in a pop-up view and the first of them is appended to the typed text.

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

• RadAutoCompleteTextView Examples

Related articles you might find useful:

• Display Modes
• Completion Modes