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 to change that default value to StartsWith:

<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, ViewChild } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-telerik-ui-pro/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 (var 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.

Contains Mode

In Contains mode the autocomplete shows only suggestions that contain the typed phrase.
Contains mode is not intended to work with the Append and SuggestAppend modes.
Since both these 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.

Related articles you mind find useful: