RadAutoCompleteTextView: Suggest modes

RadAutoCompleteTextView has three different modes for providing suggestions.

The suggest mode can be changed with the suggestionMode property of the RadAutoCompleteTextView. The default value is Suggest.

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

import { SuggestMode } from 'nativescript-ui-autocomplete';
import { getCountries } from './data';

export default {
  template: `
      <RadAutoCompleteTextView ref="autocomplete"
                               hint="select country"
        <SuggestionView ~suggestionView suggestionViewHeight="300">
          <StackLayout v-suggestionItemTemplate orientation="vertical" padding="10">
              <StackLayout orientation="horizontal">
                <Image :src="item.image" width="50"></Image>
                <Label :text="item.text" marginLeft="5" android:marginTop="15"></Label>
      <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>
  data () {
    return {
      dataItems: getCountries(),
      suggestMode: SuggestMode.Suggest,
  methods: {
    onSuggestSelected(args) {
      this.suggestMode = SuggestMode.Suggest;
    onAppendSelected(args) {
      this.suggestMode = SuggestMode.Append;
    onSuggestAppendSelected(args) {
      this.suggestMode = SuggestMode.SuggestAppend;

Suggest Mode

In Suggest mode the autocomplete represents the filtered suggestions, matching the typed text, in a pop-up view, which contains list of the suggestions.

Append Mode

In Append mode the autocomplete shows only the first suggestion matching the typed text, which is represented as direct suffix of the typed text.

Suggest-Append Mode

In SuggestAppend mode the autocomplete combines both upper-mentioned modes. It shows all matching suggestions in a pop-up view and the first of them is appended to the typed text.


Related articles you might find useful: