How to apply OnChange event for AutocompleteTextview with javascript

#1

Hello,
I tried on change events but they are not working for me.Please help.
as I used Xml as:


<au:RadAutoCompleteTextView items="{{ items }}" suggestMode="SuggestAppend"
displayMode=“Plain"
didAutoComplete=”{{ onDidAutoComplete }}“
tokenAdded=”{{ onTokenAdded}}“
tokenRemoved=”{{ onTokenRemoved }}"
tokenSelected= "{{ onTokenSelected }}"
tokenDeselected= "{{ onTokenDeselected }}“
suggestionViewBecameVisible=”{{ onSuggestionViewBecameVisible }}"
id=“autocmp” >
au:RadAutoCompleteTextView.suggestionView
<au:SuggestionView suggestionViewHeight=“300”>
au:SuggestionView.suggestionItemTemplate



</au:SuggestionView.suggestionItemTemplate>
</au:SuggestionView>
</au:RadAutoCompleteTextView.suggestionView>
</au:RadAutoCompleteTextView>

and I am Using Nativescript with Javascript I called events like

exports.onTokenSelected = function (args) {
console.log(“demo…sucess”);
var item = autocmp.android.getText();
console.log(“Item”+item);

But event is not getting called.Please suggest something.

#2

It seems you are missing the curly braces around “onTokenSelected” in the XML.

#3

Actually I tried it with Curely braces…Still it is not working

#4

the provided events are described as follows:

  • 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.
  • didAutoComplete - triggered whenever an item from the suggestions list is selected.
  • suggestionViewBecameVisible - triggered whenever the suggestion view is shown.

so for example

<au:RadAutoCompleteTextView id="autocmp" items="{{ dataItems }}" completionMode="Starts" 
didAutoComplete="onDidAutoComplete" hint="Search for a customer by name" suggestMode="Suggest"  >
            <au:RadAutoCompleteTextView.suggestionView>
                <au:SuggestionView suggestionViewHeight="300">
                    <au:SuggestionView.suggestionItemTemplate>
                        <StackLayout orientation="vertical" >
                            <Label text="{{ text }}" textWrap="true"></Label>
                        </StackLayout>
                    </au:SuggestionView.suggestionItemTemplate>
                </au:SuggestionView>
            </au:RadAutoCompleteTextView.suggestionView>
         </au:RadAutoCompleteTextView>

then in your js file

function onDidAutoComplete(args) {
    console.log( args.text);
}
exports.onDidAutoComplete = onDidAutoComplete;

Note: the curly practise is when binding to functions defined in the View Model; however, most your functions you wanna define them in the code behind the file instead

For more details in all available actions, you should download https://github.com/telerik/nativescript-ui-samples app and play with it and see its code

#5

Thank You. Now Its working Properly.

#6

Hello,One more question to ask you. as I have to Autocompletetextview On my page and If user seleted 1st one then second one sould be get reset and vice-versa . How to set selected value of Autocompletetextview to Null or default Hint…?

#7

If you are only selecting one value then you should use plain selection mode instead of token selection mode.
If you insist on using tokens view mode then you can use removeToken or removeTokenAtIndex …etc consult the docs https://docs.telerik.com/devtools/nativescript-ui/api/classes/radautocompletetextview.html

and again, most of the functionalities are already demoed on the app I shared in my previous post.

also this should be your starting point to get how it work and all available options http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/AutoCompleteTextView/overview

#8

Hello,
Yes I am already using plain selection mode for autocompletetextview. I
read all docs related to Autocompletetextview on link. But I am goetting
how to set 2nd autocompletetextview’s selected value to null or empty on
"didAutoComplete" event of 1st autocompletetextview.

#9

use resetAutocomplete() method, so it will be like

function onFirstDidAutoComplete(args) {
    console.log( args.text);
    page.getViewById("SecondAutocomplete").resetAutocomplete();
}
exports. onFirstDidAutoComplete = onFirstDidAutoComplete;
#10

Hello,
Reset works for me.
Thank you so much for your quick and kind support.