RadAutoCompleteTextView Events

In this article you are going to learn about the RadAutoCompleteTextView's events. The event are designed to notify you whenever a particular action, in the workflow of the control, has happened. They are quite useful when it comes to executing logic based on the RadAutoCompleteTextView's state.

Available Events

The RadAutoCompleteTextView control exposes these events:

• tokenAdded - triggered whenever a token is added.
• tokenRemoved - triggered whenever a token is removed.
• tokenSelected - triggered whenever a token is selected.
• tokenDeselected - triggered whenever a token is deselected.
• textChanged - triggered whenever the text property is changed.
• didAutoComplete - triggered whenever an item from the suggestions list is selected.
• suggestionViewBecameVisible - triggered whenever the suggestion view is shown.

All of these have identical logical structure and identical workflow, the only difference between them is the event which they are observing and notifing you about.

Usage

In order to get notified when one of the above-mentioned events occur, you should use the following structure with the type of event you want to capture.

<au:RadAutoCompleteTextView id="autocomplete" items="{{ dataItems }}"
  suggestMode="Suggest" displayMode="Tokens" 
  suggestionViewBecameVisible="{{ onSuggestionViewBecameVisible }}"
  didAutoComplete="{{ onDidAutoComplete }}" textChanged="{{ onTextChanged }}"
  tokenAdded="{{ onTokenAdded}}" tokenRemoved="{{ onTokenRemoved }}"
  tokenSelected= "{{ onTokenSelected }}" tokenDeselected= "{{ onTokenDeselected }}">
    <au:RadAutoCompleteTextView.suggestionView>
        <au:SuggestionView suggestionViewHeight="300">
            <au:SuggestionView.suggestionItemTemplate>
                <StackLayout orientation="vertical" padding="10">
                    <Label text="{{ text }}"></Label>
                </StackLayout>
            </au:SuggestionView.suggestionItemTemplate>
        </au:SuggestionView>
    </au:RadAutoCompleteTextView.suggestionView>
</au:RadAutoCompleteTextView>

public onTokenAdded(args) {
    this.logEvent("Added Token: " + args.token.text);
}

public onTokenRemoved(args) {
    this.logEvent("Removed Token: " + args.token.text);
}

public onTokenSelected(args) {
    this.logEvent("Selected Token: " + args.token.text);
}

public onTokenDeselected(args) {
    this.logEvent("Deselected Token: " + args.token.text);
}

public onDidAutoComplete(args) {
    this.logEvent("DidAutoComplete with text: " + args.text);
}

public onTextChanged(args) {
    this.logEvent("Text Changed: " + args.text);
}

public onSuggestionViewBecameVisible(args) {
    let autoComplete: RadAutoCompleteTextView = args.object;
    let numberOfItems = autoComplete.filteredItems.length;
    let eventText = numberOfItems + " Suggestions Visible";
    if (numberOfItems > 0) {
        eventText += " - First is " + autoComplete.filteredItems[0].text;
    }
    this.logEvent(eventText);
}

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

• Events Examples