RadAutoCompleteTextView Display Modes
RadAutoCompleteTextView has two predefined display modes.
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
:
<RadAutoCompleteTextView [items]="dataItems" displayMode="Tokens" showCloseButton="false">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
import { Component } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-ui-autocomplete";
@Component({
moduleId: module.id,
selector: "tk-autocomplete-tokens-mode",
templateUrl: "autocomplete-tokens-mode.component.html"
})
export class AutoCompleteTokensModeComponent {
private _items: ObservableArray<TokenModel>;
private 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"];
constructor() {
this.initDataItems();
}
get dataItems(): ObservableArray<TokenModel> {
return this._items;
}
private initDataItems() {
this._items = new ObservableArray<TokenModel>();
for (let i = 0; i < this.countries.length; i++) {
this._items.push(new TokenModel(this.countries[i], undefined));
}
}
}
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.
The layout mode of the tokens can be changed with the
layoutMode
property. The default value of this property is
Wrap
.
<RadAutoCompleteTextView #autocomplete [items]="dataItems" layoutMode="Wrap" displayMode="Tokens">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
import { Component, ViewChild } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-ui-autocomplete";
import { RadAutoCompleteTextViewComponent } from "nativescript-ui-autocomplete/angular";
@Component({
moduleId: module.id,
selector: "tk-autocomplete-layouts-wrap",
templateUrl: "autocomplete-layouts-wrap.component.html"
})
export class AutoCompleteLayoutsWrapComponent {
private _items: ObservableArray<TokenModel>;
private 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"];
private lastIndex: number = 0;
constructor() {
this.initDataItems();
}
@ViewChild("autocomplete", { static: false }) autocomplete: RadAutoCompleteTextViewComponent;
get dataItems(): ObservableArray<TokenModel> {
return this._items;
}
private initDataItems() {
this._items = new ObservableArray<TokenModel>();
for (let i = 0; i < this.countries.length; i++) {
this._items.push(new TokenModel(this.countries[i], undefined));
}
}
public onAddToken(args) {
if (this.dataItems.length <= this.lastIndex) {
this.lastIndex = 0;
}
this.autocomplete.autoCompleteTextView.addToken(this._items.getItem(this.lastIndex));
this.lastIndex++;
}
}
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
Want to see more examples using RadAutoCompleteTextView? Check our SDK examples repository on GitHub. You will find this and a lot more practical examples with NativeScript UI.
Related articles you mind find useful: