RadAutoCompleteTextView: Getting Started

In this article, you will learn how to initialize RadAutoCompleteTextView and use it with it's basic configuration inside an NativeScript + Vue applications.

Installation

Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-autocomplete

Initialization

Before proceeding, make sure that the nativescript-ui-autocomplete/vue module is required inside your application. This module handles the registration of the custom directives and elements required by nativescript-vue.

To create a functional RadAutoCompleteTextView you should:

  • Place the RadAutoCompleteTextView tag in your component's template
  • Once you have added it next you should specify the value for the items property. That property defines the collection of TokenModel objects which will be used to provide suggestions on user input. The TokenModel object is a data model used by the autocomplete to populate the suggestion view and the chosen items. Simply create a list of such objects in your component's code and bind it to the items property.
  • Next you would like to specify the the suggestion list of the RadAutoCompleteTextView by adding an SuggestionView between the RadAutoCompleteTextView tags and setting the ~suggestionView inline directive to it.
  • All that is left is to specify the v-template of the of the SuggestionView by adding an default Vue template structural directive between the SuggestionView tags.
const MyComponent = {
    template: `
        <Page>
            <StackLayout ios:backgroundColor="#CDCECE" padding="5">
                <Label text="Select country"></Label>
                <RadAutoCompleteTextView ref="autocmp" :items="dataItems" suggestMode="Suggest" displayMode="Tokens">
                    <SuggestionView ~suggestionView>
                        <StackLayout v-suggestionItemTemplate orientation="vertical" padding="10">
                            <v-template scope="item">
                                <Label :text="item.text" />
                            </v-template>
                        </StackLayout>
                    </SuggestionView>
                </RadAutoCompleteTextView>
                <Label text="SUGGEST MODES" marginTop="5"></Label>
                <StackLayout orientation="horizontal">
                    <Button margin="5" text="Suggest" @tap="onSuggestSelected()"></Button>
                    <Button margin="5" text="Append" @tap="onAppendSelected()"></Button>
                    <Button margin="5" text="Suggest-Append" @tap="onSuggestAppendSelected()"></Button>
                </StackLayout>
                <Label text="COMPLETION MODES"></Label>
                <StackLayout orientation="horizontal">
                    <Button margin="5" text="StartsWith" @tap="onStartsWithSelected()"></Button>
                    <Button margin="5" text="Contains" @tap="onContainsSelected()"></Button>
                </StackLayout>
                <Label text="DISPLAY MODES"></Label>
                <StackLayout orientation="horizontal">
                    <Button margin="5" text="Plain" @tap="onPlainSelected()"></Button>
                    <Button margin="5" text="Tokens" @tap="onTokensSelected()"></Button>
                </StackLayout>
            </StackLayout>
        </Page>
    `,
    created() {
        this.dataItems = new ObservableArray();
        this.dataItems.push(new TokenModel('USA', "res://image"));
    },
    data() {
        return {
            dataItems: ""
        };
    }
}

The suggestionViewHeight property allows you to have control over the height of the suggestion view.
The hint property allows you to provide a text that will be displayed when there is no input.
The text property allows you to change the autocomplete text or get the current user input.