Any examples of Google Places Autocomplete with MAUI?

[David Jones]

I have searched the forums and searched google  but cannot find anything that has examples of Google Places Autocomplete. Even a Bing Or Microsoft Maps will work.

Does syncfusion have any examples on how to implement typing an address and have it fill the remaining address fields 

Iit will be appreciated.

[AhamedAliNishad JahirHussain]

Hi David ,

 

Query : Any examples of Google Places Autocomplete with MAUI?

 

We have reviewed your query, and based on the provided information, we have created a sample. By utilizing CustomFiltering, we can obtain suggestions in the AutoComplete, similar to Google suggestions. Please review the attached sample and let us know the details.

 

If your requirements differ from the provided solution, kindly provide detailed information about your specific needs. This will enable us to better understand your requirements and offer a prompt and tailored solution at the earliest opportunity.

 

Regards,

Ahamed Ali Nishad.

Attachment: GoogleAutoComplete_5343e24c.zip

[AhamedAliNishad JahirHussain]

Hi David ,

 

Query : Any examples of Google Places Autocomplete with MAUI?

 

Additionally, you can refer to the blog post below for detailed information.

 

Link : Google-Powered Autocomplete: Leveraging Search Suggestions in .NET MAUI (syncfusion.com)

 

Regards,

Ahamed Ali Nishad.

[David Jones]

Thank you for the project. One question since I am new to MAUI. In your MAUI Android app you all are using VieModels and Binding. How can i create the SFAutoComplete with the Customer filter using the ViewModel approach?

                <Grid.BindingContext>

                    <local:DataFormViewModel/>

                </Grid.BindingContext>

                <Label Text="Create Event Form" FontSize="Subtitle"

                        IsVisible="{OnPlatform WinUI=True, MacCatalyst=True, Default=False}"

                       Margin="20, 15, 0, 0"

                       VerticalOptions="Center"

                        FontAttributes="Bold"/>

                <core:SfBusyIndicator x:Name="busyIndicator" IsRunning="False" AnimationType="Cupertino"

                DurationFactor="0.2" SizeFactor="1" IndicatorColor="#FFF"

                OverlayFill="#000000" Opacity=".7" />

                <dataForm:SfDataForm x:Name="eventForm" DataObject="{Binding EventRegistrationModel}"

                                     ColumnCount="2" ValidationMode="PropertyChanged" Grid.Row="1">

                    <dataForm:SfDataForm.DefaultLayoutSettings>

                        <dataForm:DataFormDefaultLayoutSettings LabelPosition="Top"/>

                    </dataForm:SfDataForm.DefaultLayoutSettings>

                </dataForm:SfDataForm>

protected override void OnAttachedTo(SampleView bindable)

{

    try

    {

        base.OnAttachedTo(bindable);

        this.dataForm = bindable.Content.FindByName<SfDataForm>("eventForm");

        dataForm.ItemsSourceProvider = new ItemsSourceProvider();

        if (this.dataForm != null)

        {

            this.dataForm.RegisterEditor("State", DataFormEditorType.AutoComplete);

            this.dataForm.RegisterEditor(nameof(EventRegistrationModel.Mobile), DataFormEditorType.MaskedText);

            this.dataForm.RegisterEditor(nameof(EventRegistrationModel.StartTime), DataFormEditorType.Time);

            this.dataForm.RegisterEditor(nameof(EventRegistrationModel.EndTime), DataFormEditorType.Time);

            this.dataForm.RegisterEditor(nameof(EventRegistrationModel.State), DataFormEditorType.ComboBox);

            this.dataForm.RegisterEditor(nameof(EventRegistrationModel.Zip), DataFormEditorType.MaskedText);

            this.dataForm.RegisterEditor(nameof(EventRegistrationModel.Address), DataFormEditorType.AutoComplete);

            this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;

        }

        this.clearButton = bindable.Content.FindByName<Button>("clearButton");

        this.submitButton = bindable.Content.FindByName<Button>("submitButton");

        this.busyIndicator = bindable.Content.FindByName<SfBusyIndicator>("busyIndicator");

        if (this.clearButton != null)

        {

            this.clearButton.Clicked += OnClearButtonClicked;

        }

        if (this.submitButton != null)

        {

            this.submitButton.Clicked += OnSubmitButtonClicked;

        }

    }

    catch (Exception ex)

    {

        App.Current!.MainPage!.DisplayAlert("Loading Error", "There was an error loading the page" + ex.Message, "OK");

    }

}

[Vidyalakshmi Mani]

Hi David,

To implement the auto complete editor with custom filtering in a MAUI SfDataForm using the ViewModel approach, you can follow these steps:

1. SfDataForm Configuration:

   - The SfDataForm is configured with a DataObject property bound to the ContactsInfo property in a ViewModel, facilitating data binding between the UI and the underlying data model.

2. ViewModel Definition:

   - The ViewModel class defines a ContactsInfo property of type Model, representing the data object to be edited within the SfDataForm.

   - The ViewModel is initialized with a new instance of Model in its constructor, ensuring that the ContactsInfo property is not null.

3. DataFormBehavior Usage:

   - The DataFormBehavior class is utilized as a behavior for the SfDataForm, allowing for the customization of its behavior.

   - The OnAttachedTo method is overridden to register the SFAutoComplete editor for the "Address" field within the SfDataForm as an autocomplete editor. 

4. DataFormItemManager Extension:

   - The DataFormItemManagerEditorExt
is used to customize the SFAutoComplete editor.

   - The InitializeDataEditor method is overridden to apply a custom filter behavior (CustomFiltering) to the SFAutoComplete control, enhancing its functionality within the SfDataForm.

Please see the following code snippets for your reference:

 

// Model and ViewModel classes

public class Model

{

     public string Address { get; set; }

}

 

public class ViewModel

{

   public Model ContactsInfo { get; set; }

 

   public ViewModel()

   {

       this.ContactsInfo = new Model();

   }

}

 

// Custom Filtering Logic

public class CustomFiltering : IAutocompleteFilterBehavior

{

    public CustomFiltering()

    {

        GetGoogleSuggestions("test");

    }

 

   public Task<object> GetMatchingItemsAsync(SfAutocomplete source, AutocompleteFilterInfo filterInfo)

   {

       return GetGoogleSuggestions(filterInfo.Text);

   }

 

   private async Task<object> GetGoogleSuggestions(string query)

   {

        //Your code

   }

}

 

// DataFormBehavior

public class DataFormBehavior : Behavior<SfDataForm>

{

   protected override void OnAttachedTo(SfDataForm dataForm)

   {

       base.OnAttachedTo(dataForm);            

       dataForm.RegisterEditor("Address", DataFormEditorType.AutoComplete);            

            dataForm.ItemManager = new DataFormItemManagerEditorExt();          

   }

       

   protected override void OnDetachingFrom(SfDataForm dataForm)

   {            

       base.OnDetachingFrom(dataForm);

   }

}

 

// DataFormItemManager Extension

public class DataFormItemManagerEditorExt : DataFormItemManager

{

   public override void InitializeDataEditor(DataFormItem dataFormItem, View editor)

   {            

       if (editor is SfAutocomplete autoComplete)

       {

          autoComplete.FilterBehavior = new CustomFiltering();

       }

   }

}

 

//MainPage.xaml

 

<dataForm:SfDataForm x:Name="dataForm"

                     DataObject="{Binding ContactsInfo}">

 

        <dataForm:SfDataForm.BindingContext>

            <local:ViewModel/>

        </dataForm:SfDataForm.BindingContext>

 

        <dataForm:SfDataForm.Behaviors>

            <local:DataFormBehavior/>

        </dataForm:SfDataForm.Behaviors>

 

</dataForm:SfDataForm>

 

 

This implementation provides a flexible and efficient solution for integrating the SFAutoComplete control within a MAUI SfDataForm. We have prepared a simple sample demonstrating this. Please see the attached sample for your reference.

We hope that this helps you. If you have any further questions or need additional assistance, please feel free to ask.

Regards,

Vidyalakshmi M.

Attachment: MAUIDataForm_dd82fb85.zip