The SfAutocomplete search field is not showing in the page.

[Sourav]

Hi,

I am using SfAutocomplete. SfAutocomplete search box is not showing in the app page.

 I am providing my xaml page.I tried in two format, but just lebel is displaying in the app page.

In first format it's showing nothing.

Just Displaying "Pick a Location" in second format of xaml page.

How to resolve it?

Xaml Page --------

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 

    xmlns:local="clr-namespace:Maax.ViewModels;assembly=Maax" 

    xmlns:autocomplete="clr-namespace:Syncfusion.SfAutoComplete.XForms;assembly=Syncfusion.SfAutoComplete.XForms"

    x:Class="Maax.Views.LocationSelection">

    <ContentPage.Resources>

        <ResourceDictionary>

            <!--Color converter differentiating delivery status  -->

            <local:StringToColorConverter x:Key="ColorConverter"/>

            <!--DataTemplate that applys on each AutoComplete's DropDown item with bounded value -->

            <DataTemplate x:Key="itemTemplate">

                <StackLayout Orientation="Horizontal">

                    <Label Text="{Binding text}" 

                           Margin="5,0"

       FontSize="15" 

                           HorizontalOptions="Center"

       TextColor="Black" />

                </StackLayout>

            </DataTemplate>

        </ResourceDictionary>

    </ContentPage.Resources>

    <!--Sets ViewModel class as Binding Context of this content page -->

    <ContentPage.BindingContext>

        <local:LocationViewModel x:Name="viewmodel"/>

    </ContentPage.BindingContext>

    <!--<Grid >

        <Grid.RowDefinitions>

            <RowDefinition Height="100"/>

            <RowDefinition Height="100"/>

        </Grid.RowDefinitions>

        <StackLayout Orientation="Vertical">

            <Grid BackgroundColor="Black" 

                  HeightRequest="50">

                <Label Text="Pick an Location" 

                       FontSize="18" 

                       TextColor="White"

                       Margin="5,5,5,5"/>

            </Grid>

            --><!--Initalizing SfAutoComplete that bound with "Text", "ItemSource", "SelectedItem" from its BindingContext and ItemTeplate applied from StaticResource -->

            <!--Here, BorderColor is used as error indicator. Where red color indicates invalid input--><!--

            <StackLayout>

            <autocomplete:SfAutoComplete Margin="1,0,1,5"  x:Name="LKControl"

                        Text="{Binding Text, Mode=TwoWay}" 

                        DataSource="{Binding ItemsSource}" 

                        ItemTemplate="{StaticResource itemTemplate}" 

                        ShowSuggestionsOnFocus="False"

                        SuggestionMode="Custom"                

                        SelectedItem = "{Binding SelectionObject,Mode=TwoWay}"

                        DisplayMemberPath="text"  

            SelectedValuePath="id"  

            Watermark="Please Enter Location" 

            AutoCompleteMode="Suggest" 

            HeightRequest="100"

                        DropDownItemHeight="50"   

            MaximumDropDownHeight="200"

                        NoResultsFoundText="{Binding LoadingText}"

                        MultiSelectMode="Token"

                        TokensWrapMode="Wrap"

                        IsSelectedItemsVisibleInDropDown="False"

                        ShowClearButton="False"

                        FocusChanged="Handle_FocusChanged"/>

            </StackLayout>

        </StackLayout>

    </Grid>-->

    <Grid Margin="0,8,0,8"  BackgroundColor="White"

                      VerticalOptions="FillAndExpand"  HorizontalOptions="FillAndExpand" Padding="0,10,0,22">

        <Grid.RowDefinitions>

            <RowDefinition Height="*"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0">

            <Label Text=" Pick a Location "/>

       </StackLayout>

        <StackLayout Grid.Row="1">

            <autocomplete:SfAutoComplete Margin="1,0,1,5"  x:Name="LKControl"

                        Text="{Binding Text, Mode=TwoWay}" 

                        DataSource="{Binding ItemsSource}" 

                        ItemTemplate="{StaticResource itemTemplate}" 

                        BorderColor="{Binding ValidationColor}"

                        ShowSuggestionsOnFocus="False"

                        SuggestionMode="Custom"                

                        SelectedItem = "{Binding SelectionObject,Mode=TwoWay}"

                        DisplayMemberPath="text"  

            SelectedValuePath="id"  

            Watermark="Please Enter Location" 

            AutoCompleteMode="Suggest" 

            HeightRequest="100"

                        DropDownItemHeight="50"   

            MaximumDropDownHeight="200"

                        NoResultsFoundText="{Binding LoadingText}"

                        MultiSelectMode="Token"

                        TokensWrapMode="Wrap"

                        IsSelectedItemsVisibleInDropDown="False"

                        ShowClearButton="False"                                        

                        FocusChanged="Handle_FocusChanged"/>

        </StackLayout>

    </Grid>

</ContentPage>

[Paul Anderson S]

Hi Sourav, 

 

Greetings from Syncfusion. 

 

We have prepared a sample from the provided XAML page codes. In which the control shows as expected and it has been recorded as video. You can download the sample and the video from the following link: 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoCompleteSample-1730502664  

 

Output video link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete-2127340232  

 

Note : For the Xamrain.Forms.iOS and Xamarin.Forms.UWP project we need to add our control renderer {Eg: for autocomplete on iOS project we need to add new SfAutoCompleteRenderer on AppDelegate.cs page} which has been mentioned in our User guide documentation. 

 

For iOS : https://help.syncfusion.com/xamarin/sfautocomplete/getting-started#additional-step-for-ios  

For UWP : https://help.syncfusion.com/xamarin/sfautocomplete/getting-started#additional-step-for-uwp  

 

 

Please let us know if you have any concern about this. If the issue persists at your end, please update us with the modified sample with the replication steps and the platform in which the issue occurs. This could be helpful for us to provide better solution on this. 

 

Regards, 

Paul Anderson