🐦 Grab your early bird tickets for the next NativeScript conference! jsMobileConf is coming back to Boston.

NativeScript & Vue.JS

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 NativeScriptUIAutoCompleteTextViewModule from the nativescript-ui-autocomplete plugin has been imported in the main JS in your app with the following sentences:

import Vue from 'nativescript-vue';
import RadAutoComplete from 'nativescript-ui-autocomplete/vue';
Vue.use(RadAutoComplete);

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.

First, lets create a data.ts file that generate the items used for autocompletion:

import { TokenModel } from 'nativescript-ui-autocomplete';

export const 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'
];

export const getCountry = (i: number) => {
  const country = countries[i];
  return new TokenModel(country, null);
};

export const getCountryWithImage = (i: number) => {
  const country = countries[i];
  return new TokenModel(country, `res://${country.toLowerCase()}`);
};

export const getCountriesCount = () => {
  return countries.length;
};

So, if you create a new MyPageWithAutocomplete.js component which renders the whole page, you would need to add a code like this:

import { AutoCompleteCompletionMode, AutoCompleteDisplayMode, AutoCompleteSuggestMode } from 'nativescript-ui-autocomplete';
import { getCountry, getCountriesCount, getCountryWithImage } from '../data';

const description = 'Getting Started';

export default {
  name: 'GettingStarted',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <StackLayout ios:backgroundColor="#CDCECE" padding="5">
      <Label text="Select country"></Label>
      <RadAutoCompleteTextView ref="autocomplete"
                               :completionMode="completionMode"
                               :suggestMode="suggestMode"
                               :displayMode="displayMode"
                               :items="dataItems">
        <SuggestionView ~suggestionView suggestionViewHeight="300">
          <StackLayout v-suggestionItemTemplate orientation="vertical" padding="10">
            <v-template>
              <StackLayout orientation="vertical">
                <Label :text="item.text" marginLeft="5" android:marginTop="15"></Label>
              </StackLayout>
            </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>
  `,
  data () {
    let dataItems = new ObservableArray();

    for (let i = 0; i < getCountriesCount(); i++) {
      dataItems.push(getCountry(i));
    }
    return {
      title: description,
      dataItems: dataItems,
      displayMode: AutoCompleteDisplayMode.Tokens,
      suggestMode: AutoCompleteSuggestMode.Suggest,
      completionMode: AutoCompleteCompletionMode.StartsWith,
    };
  },
  methods: {
    onNavigationButtonTap() {
      frameModule.topmost().goBack();
    },
    onSuggestSelected(args) {
      this.suggestMode = AutoCompleteSuggestMode.Suggest;
      this.$refs.autocomplete.resetAutoComplete();
    },
    onAppendSelected(args) {
      this.suggestMode = AutoCompleteSuggestMode.Append;
      this.completionMode = AutoCompleteCompletionMode.StartsWith;
      this.$refs.autocomplete.resetAutoComplete();
    },
    onSuggestAppendSelected(args) {
      this.suggestMode = AutoCompleteSuggestMode.SuggestAppend;
      this.completionMode = AutoCompleteCompletionMode.StartsWith;
      this.$refs.autocomplete.resetAutoComplete();
    },
    onStartsWithSelected(args) {
      this.completionMode = AutoCompleteCompletionMode.StartsWith;
      this.$refs.autocomplete.resetAutoComplete();
    },
    onContainsSelected(args) {
      this.completionMode = AutoCompleteCompletionMode.Contains;
      this.suggestMode = AutoCompleteSuggestMode.Suggest;
      this.$refs.autocomplete.resetAutoComplete();
    },
    onPlainSelected(args) {
      this.displayMode = AutoCompleteDisplayMode.Plain;
      this.$refs.autocomplete.resetAutoComplete();
    },
    onTokensSelected(args) {
      this.displayMode = AutoCompleteDisplayMode.Tokens;
      this.$refs.autocomplete.resetAutoComplete();
    },
  },
};

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.