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

• AutoCompleteView