New to Telerik UI for Xamarin? Download free 30-day trial

How to replace AutoComplete with AutoCompleteView

Environment

Product Version R1 2019
Product AutoCompleteView for Xamarin
Xamarin.Forms 3.4

Description

This help article shows how to migrate from AutoComplete control to AutoCompleteView control. Both components share similar API regarding the features available in the AutoComplete control, so the migration should be straight-forward.

The table below shows the differences between the features in the RadAutoCompleteView control vs. RadAutoComplete control:

Features AutoCompleteView AutoComplete
ItemsSource
ImagePath
TextSearchPath
Watermark
DisplayMode
CompletionMode
SuggestMode
DisplayTextFormatter -
FilteredItems
IsClearButtonVisible
NoResultMessage
NoResultTemplate -
TokenTemplate -
ShowMoreItems -
ShowMoreTemplate -
TextChanged -
LoadingTemplate - Remote Search -
SearchThreshold
ShowSuggestionView
SuggestionViewHeight
SuggestionViewBackgroundColor
SuggestionItemTemplate
SuggestionItemTextColor
SuggestionViewTemplate -
FontFamily
FontSize
FontWeight -
FontAttributes -
TextColor
TokenStyle -
FilteredItemsChanged
SuggestionItemSelected
Text
ShowSuggestions -
HideSuggestions -

Migrate from AutoComplete to AutoCompleteView

Control declaration:

  • AutoCompleteView
<telerikInput:RadAutoCompleteView x:Name="autoCompleteView" 
                                  Watermark="Search here..." />
  • AutoComplete
<telerikInput:RadAutoComplete x:Name="autoComplete" 
                              Watermark="Search here..." />
  • Same namespace
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

SuggestionItemTemplate differences:

AutoCompleteView uses the Xamarin.Forms ListView for visualize the Suggestions. When the custom SuggestionItem Template is used you will need to add the ViewCell inside the DataTemplate. For example:

<telerikInput:RadAutoCompleteView.SuggestionItemTemplate>
    <DataTemplate>
       <ViewCell>
           <Grid>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <Label Margin="5"
                      FontSize="24"
                      Text="{Binding Name}"
                      TextColor="Black"/>
                <Image Grid.Column="1"
                       Margin="5"
                       HeightRequest="20"
                       Source="{Binding ImageSource}"
                       WidthRequest="20"/>
             </Grid>
        </ViewCell>
    </DataTemplate>
</telerikInput:RadAutoCompleteView.SuggestionItemTemplate>

See Also

In this article