[Solved] How to detect number of suggestions shown in suggestion view

[Anurag]

Hi 

Fo my nativescript angular app I wanted to detect the number of matching suggestions that are shown in the suggestion view so that I can trigger a specific action when no matching suggestions are found. I tried the following code which seems to work in IOS but not in android. Please advise on how I can get the number of matching suggestions on both IOS and android.

Template

<RadAutoCompleteTextView row="6" #autocmp [items]="dataItems" suggestMode="Suggest" completionMode="Contains" displayMode="Tokens" (itemLoading)="onTagSuggestionsLoading($event)" (suggestionViewBecameVisible)="onSuggestionViewBecameVisible($event)" layoutMode="Horizontal"<br>                (didAutoComplete)="onDidAutoComplete($event)" (tokenAdded)="onTokenAdded($event)" (tokenRemoved)="onTokenRemoved($event)">
   <SuggestionView tkAutoCompleteSuggestionView>
       <ng-template tkSuggestionItemTemplate let-item="item">
           <StackLayout orientation="horizontal" padding="5">
           <Label [text]="item.text"></Label>
           </StackLayout>
       </ng-template>
    </SuggestionView>
</RadAutoCompleteTextView>

 

TS code

onSuggestionViewBecameVisible(args) {
   self.numberOfMatchingTags = args._object.filteredItems.length;
   if (self.numberOfMatchingTags === 0) {
         self.addOwnTag();
   }
}

 

[Nick Iliev]

Hello Anurag,

The filteredItems property behind RadAutoCompleteTextView is private at this point (accessible only when no explicit casting to RadAutocCompleteTextView)
This means that we are not officially released the property as functionality and the future implementation may change.
All above considered the filteredItems property is an experimental feature not officially released but our development team is working on it.
Currently, there is no viable option to access the length of the filtered item on Android.

For your convenience, I have logged your issue as a feature request here, and you can track its development and possible workarounds in the linked issue.

Regards,
Nikolay Iliev
Progress Telerik

[Anurag]

Thanks for the clarification Nikolay. Is there any way at all that we can detect that the suggestions view is empty?

[Nick Iliev]

Hi Anurag,

One way to workaround this issue (getting the list of visible suggestions and/or detecting when there are not visible suggestions) is to directly handle the native 
EditText control used in RadAutoCompleteTextView on Android. After accessing the native control, you can overwrite the native event listener using NativeScript marshaling (data conversion from Java to JavaScript) and implement your own logic to detect if the user input is part of some of the suggestions (startstWith or contains depending on the used suggestion mode).

For example, let's assume that we are working with this example

The first thing to do is to introduce callback fro the loaded event for our RadAutoCompleteTextView

public onRadAutocompleteLoaded(args) {
    let rad = <RadAutoCompleteTextView>args.object;
    console.log(rad); // RadAutoCompleteTextView(222)
    console.log(rad.android); // com.telerik.widget.autocomplete.RadAutoCompleteTextView{265ae4f VFEDH.... .....A.D 13,64-1067,182 #4}

    let radAndroid = rad.android; // com.telerik.widget.autocomplete.RadAutoCompleteTextView{265ae4f VFEDH.... .....A.D 13,64-1067,182 #4}
    let nativeTextField = radAndroid.getTextField();

    let that = this; // we must "cache" this to reuse it in the Java implementation of tetChanfed

    nativeTextField.addTextChangedListener(new android.text.TextWatcher({
        afterTextChanged(s) {
            console.log("afterTextChanged");
            console.log(s);

            let counter = 0;
            that.countries.forEach(country => {
                console.log(country.toLowerCase().startsWith(s)); // in this case using JS startsWith method
                if (country.toLowerCase().startsWith(s)) {
                    counter++;
                }
            });
            console.log("visible suggestions: " + counter); // visible suggestion starting with s
        },
        beforeTextChanged(s, start, count, after) {
            console.log("beforeTextChanged");
            console.log(s);
            console.log(start);
            console.log(count);
            console.log(after);
        },
        onTextChanged(s, start, before, count) {
            console.log("beforeTextChanged");
            console.log(s);
            console.log(start);
            console.log(before);
            console.log(count);
        }
    }))
}

And provide the callback in our HTML file as follows:

<RadAutoCompleteTextView [items]="dataItems" (loaded)="onRadAutocompleteLoaded($event)" >

With the solution above, we are directly overwriting the native event handler for Android. When the user inputs any characters, the afterTextChanged event will be triggered, and
in this event, we will check our suggestions for matching queries (depending on the logic you can use startsWith, contains or other JavaScript methods)

Keep in mind, that the above solution will work for Android (for iOS you can still use filteredItems) and our development team is considering providing this out-of-the-box functionality. The feature request is logged here and I have upvoted the feature request via your ticket.

Regards,
Nikolay Iliev
Progress Telerik

[Anurag]

Thanks Nikolay. Appreciate the help.