RadAutoCompleteTextView Display Modes

RadAutoCompleteTextView has two predefined display modes.

• Plain
• Tokens

Display mode can be changed with the displayMode property of the RadAutoCompleteTextView. The default value is Plain.

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

import { AutoCompleteCompletionMode, AutoCompleteDisplayMode } from 'nativescript-ui-autocomplete';
import { getCountry, getCountriesCount } from '../data';
import DisplayModes from '~/examples/Display-modes/Display-modes';

const description = 'Tokens';

export default {
  name: 'Tokens',
  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"
                               :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>
    </StackLayout>
  </Page>
  `,
  data () {
    let dataItems = new ObservableArray();

    for (let i = 0; i < getCountriesCount(); i++) {
      dataItems.push(getCountry(i));
    }
    return {
      title: description,
      dataItems: dataItems,
      completionMode: AutoCompleteCompletionMode.Contains,
      displayMode: AutoCompleteDisplayMode.Tokens
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    }
  }
};

Plain mode

In plain mode the RadAutoCompleteTextView displays chosen item as plain text. With this mode only one item can be chosen.

Tokens mode

Tokens mode allows multiple choice of items, which are displayed as tokens.

When RadAutoCompleteTextView's displayMode is Tokens, you can apply two different behaviors for token arrangement.

• Horizontal
• Wrap

The layout mode of the tokens can be changed with the layoutMode property. The default value of this property is Wrap.

export default {
  name: 'Switch at runtime',
  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"
                               suggestMode="Suggest"
                               displayMode="Tokens"
                               :layoutMode="layoutMode"
                               :items="dataItems">
        <SuggestionView ~suggestionView suggestionViewHeight="300">
          <StackLayout v-suggestionItemTemplate orientation="vertical" padding="10">
            <v-template>
              <StackLayout orientation="horizontal">
                <Label :text="item.text" marginLeft="5" android:marginTop="15"></Label>
              </StackLayout>
            </v-template>
          </StackLayout>
        </SuggestionView>
      </RadAutoCompleteTextView>

      <Label text="LAYOUT MODES" marginTop="5"></Label>
      <StackLayout orientation="horizontal">
        <Button margin="5" text="Horizontal" @tap="onHorizontalSelected"></Button>
        <Button margin="5" text="Wrap" @tap="onWrapSelected"></Button>
      </StackLayout>
      <StackLayout orientation="horizontal">
        <GridLayout rows="auto, auto">
          <Label row="0" text="For testing purposes:"></Label>
          <Button row="1" margin="5" text="Add next token" @tap="onAddToken"></Button>
        </GridLayout>
      </StackLayout>

    </StackLayout>
  </Page>
  `,
  data () {
    let dataItems = new ObservableArray();

    for (let i = 0; i < getCountriesCount(); i++) {
      dataItems.push(getCountry(i));
    }
    return {
      title: description,
      dataItems: dataItems,
      layoutMode: AutoCompleteLayoutMode.Wrap,
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
    onHorizontalSelected(args) {
      this.layoutMode = AutoCompleteLayoutMode.Horizontal;
    },
    onWrapSelected(args) {
      this.layoutMode = AutoCompleteLayoutMode.Wrap;
    },
    onAddToken() {
      if (this.dataItems.length <= this.lastIndex) {
        this.lastIndex = 0;
      }

      this.$refs.autocomplete.addToken(
        this.dataItems.getItem(this.lastIndex)
      );
      this.lastIndex++;
    },
  },
  created () {
    this.lastIndex = 0;
  },
};

Wrap layout

In wrap mode tokens are arranged on multiple lines. Every time a new line is started the RadAutoCompleteTextView is expanding in order to show all tokens.

Horizontal layout

In horizontal mode tokens are displayed on single line which can be scrolled horizontally in order to display all tokens.

References

Related articles you mind find useful:

• Completion Modes
• Suggest Modes