RadAutoCompleteTextView Completion Modes

RadAutoCompleteTextView has two modes for filtering suggestions.

The completion mode can be changed with the completionMode property of the RadAutoCompleteTextView. The default value is StartsWith.

The next code snippet shows how you can change the completionMode:

<RadAutoCompleteTextView [items]="dataItems" completionMode="StartsWith">
    <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-startswith-mode",
    templateUrl: "autocomplete-startswith-mode.component.html"
})
export class AutoCompleteStartsWithModeComponent {
    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));
        }
    }
}

StartsWith Mode

In StartsWith mode the autocomplete shows only suggestions that start with the typed phrase.

In Contains mode the autocomplete shows the suggestions that contain the typed phrase, but not necessarily in the beginning. The completion mode Contains is not intended to work with the Append and SuggestAppend suggest modes. Since these suggest modes append the rest of the suggestion to the typed text, the combination between them and Contains won't be helpful but rather confusing.

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

NativeScript Angular

RadAutoCompleteTextView Completion Modes

StartsWith Mode

Contains Mode

References