Show all items in list

[Itai]

Hello,

The situation now is that I have AutoCompleteView with names of clubs, when the entry is empty then list is empty.

I would like that when the entry is empty ,all clubs names would be shown in list since when the users that use the application would not perfecrly know how to write the correct names and then they call us to say that their club is not on list.

 

How can I do that?

 

Thanks.

[Didi]

Hello,

The RadAutoCompleteView exposes the ability to explicitly show/hide the popup containing all items through the following methods:

- ShowSuggesstions: Shows all items when the control recieves focus.

- HideSuggestions: Hide all items when the focus of the control is lost.

For more information on this: check the AutoCompleteView Methods help article.

I hope this will help.

Regards,
Didi
Progress Telerik

[John]

Hello Didi,

 

It seems the ShowSuggestions() method doesn't work if a user is already in the search field, but just deleted all text. Using the TextChanged event in combination with ShowSuggestions doesn't work when all text is removed either. Do you have another recommendation?

 

Here's my XAML:

<telerikInput:RadAutoCompleteView x:Name="RouteAutoCompleteView"
                                                                  Watermark="Search for Route"
                                                                  ItemsSource="{ Binding Routes }"
                                                                  Text="{Binding SelectedRoute.RouteNum }"
                                                                  SuggestionViewHeight="250"
                                                                  TextSearchPath="RouteNum"
                                                                  CompletionMode="Contains"
                                                                  NoResultsMessage="There are no matching routes."
                                                                  ShowSuggestionView="True"
                                                                  SuggestMode="Suggest"
                                                                  SuggestionItemSelected="RouteSelected"
                                                                  Focused="AutoCompleteOnFocus"
                                                                  TextChanged="OnTextChanged"/>

 

Here is my code behind:

public void AutoCompleteOnFocus(object sender, FocusEventArgs e)
       {
           if (sender is RadAutoCompleteView autoSuggest)
           {
               autoSuggest.ShowSuggestions();
           }
       }

       public void OnTextChanged(object sender, TextChangedEventArgs e)
       {
           if (sender is RadAutoCompleteView autoCompleteView)
           {
               autoCompleteView.ItemsSource = null;
               currentText = e?.NewTextValue ?? "";
               string searchText = currentText.ToUpperInvariant();
               if (sender == RouteAutoCompleteView)
               {
                   autoCompleteView.ItemsSource = ViewModel.Routes.Where(i => i.RouteNum.ToUpperInvariant().Contains(searchText));
                   autoCompleteView.ShowSuggestions();
               }
               else
               {
                   autoCompleteView.ItemsSource = ViewModel.Customers.Where
                       (i => i.CustomerNum.ToUpperInvariant().Contains(searchText) || i.CustomerName.ToUpperInvariant().Contains(searchText));
               }
           }
       }

[Didi]

Hello John,

Thank you for the provided code.

I have created a sample based on it and in order to show all suggestions when there is no value inside  the input field you will need to call ShowSuggestions method. For example:

<StackLayout>
        <!-- >> autocompleteview-features-remote-search -->
        <telerikInput:RadAutoCompleteView x:Name="autoCompleteView"
                                          TextChanged="OnTextChanged"
                                          ItemsSource="{Binding Source}"
                                          Focused="autoCompleteView_Focused"
                                          TextSearchPath="Name"
                                          Watermark="Remote Search..."
                                          SuggestionViewHeight="200">
            <telerikInput:RadAutoCompleteView.NoResultsTemplate>
                <DataTemplate>
                    <Label Text="No match was found for the specific search. Please try again."
                           HorizontalOptions="Center"
                           VerticalOptions="Center"/>
                </DataTemplate>
            </telerikInput:RadAutoCompleteView.NoResultsTemplate>
        </telerikInput:RadAutoCompleteView>
        <!-- << autocompleteview-features-remote-search -->
    </StackLayout>

and the code for TexhChanged and Focused events:

private void OnTextChanged(object sender, TextChangedEventArgs e)
{
    var autoCompleteView = (RadAutoCompleteView)sender;
    autoCompleteView.ItemsSource = null;

    this.currentText = e.NewTextValue ?? "";

    if (this.currentText.Length >= autoCompleteView.SearchThreshold && !this.isRemoteSearchRunning)
    {
        this.isRemoteSearchRunning = true;
        Device.StartTimer(TimeSpan.FromMilliseconds(1500), () =>
        {
            this.isRemoteSearchRunning = false;
            string searchText = this.currentText.ToLower();
            autoCompleteView.ItemsSource = this.viewModel.Source.Where(i => i.Name.ToLower().Contains(searchText));
            return false;
        });
    }

    else if(this.currentText.Length == 0)
    {   // call showsuggestions when there is no text in the input field
        autoCompleteView.ItemsSource = this.viewModel.Source;
        Device.BeginInvokeOnMainThread(() =>
        {
            autoCompleteView.ShowSuggestions();
        });
    }
}

private void autoCompleteView_Focused(object sender, FocusEventArgs e)
{
    this.autoCompleteView.ShowSuggestions();
}

I hope this will help.

Regards,
Didi
Progress Telerik

[John]

Hello Didi,

 

Thank you for the response on that. That fixed the issue with the results showing up is the text is deleted through TextChanged, but if a user clicks the clear button (the X on the right side) it clears the text, but doesn't give the suggestion box. Is there a control exposed I can tie to the clear button being clicked?

Thanks

[Didi]

Hello John,

I am glad to hear that the provided solution helped. 

Regarding to the Clear button, it clears the input field. 

When testing with Device.BeginInvokeOnMainThread the suggestion list is not displayed. So I assume this is a timing issue. I have replaced it with StartTimer. I have tested on my side and when the clear button is clicked the text changed event is fired and the autocompleteview suggestion list is visualized. 

So replace the logic as follow:

else if (this.currentText.Length == 0)
{   // call showsuggestions when there is no text in the input field
    autoCompleteView.ItemsSource = this.viewModel.Source;

    Device.StartTimer(TimeSpan.FromMilliseconds(100), () =>
    {
        autoCompleteView.ShowSuggestions();
        return false;
    });
}

Regards,
Didi
Progress Telerik