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
.
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.
import { AutoCompleteSuggestMode } from 'nativescript-ui-autocomplete';
import { getCountry, getCountriesCount } from '../data';
const description = 'Suggest';
export default {
name: 'Suggest',
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="suggestMode"
: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,
suggestMode: AutoCompleteSuggestMode.Suggest
};
},
methods: {
onNavigationButtonTap() {
Frame.topmost().goBack();
}
}
};
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.
import { AutoCompleteSuggestMode } from 'nativescript-ui-autocomplete';
import { getCountry, getCountriesCount } from '../data';
import DisplayModes from '~/examples/Display-modes/Display-modes';
const description = 'Append';
export default {
name: 'Append',
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="suggestMode"
: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,
suggestMode: AutoCompleteSuggestMode.Append
};
},
methods: {
onNavigationButtonTap() {
Frame.topmost().goBack();
}
}
};
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.
import { AutoCompleteSuggestMode } from 'nativescript-ui-autocomplete';
import { getCountry, getCountriesCount } from '../data';
import DisplayModes from '~/examples/Display-modes/Display-modes';
const description = 'Suggest & Append';
export default {
name: 'Suggest & Append',
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="suggestMode"
: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,
suggestMode: AutoCompleteSuggestMode.SuggestAppend
};
},
methods: {
onNavigationButtonTap() {
Frame.topmost().goBack();
}
}
};
References
Related articles you might find useful: