1. Home
  2. Forum
  3. Blazor
  4. Any codesamples for Autcomplete control against Google Places?

Any codesamples for Autcomplete control against Google Places?

I have searched but cannot find it. So if you have something like that, or similar against Bing, it will be appreciated.


Regards Petter / Norway


11 Replies
PM Ponmani Murugaiyan Syncfusion Team March 28, 2022 01:26 PM UTC

Hi Petter, 

AutoComplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your application to search words on the basis of characters entered by user. When a user starts typing an address, autocomplete will fill in the rest.  
  
The  following JavaScript is used to implement autocomplete location search textbox in your webpage. So to use this you have to use this javascript in your project. 


Using Syncfusion AutoComplete, you can prevent the default filtering action and update your custom filtering using the Filtering event. Here we restricted default filtering and passed the customer typed value to the JSInterop, where we have fetched the value using google maps autocomplete service and again returned the filtered value to the Syncfusion autocomplete Filter method. 

 public async Task OnFiltering(FilteringEventArgs args)  
    {  
        args.PreventDefaultAction = true;  
        var query = new Query();  
        if (args.Text != "")  
        {  
            filteredData = await JsRuntime.InvokeAsync<List<string>>("OnFillter", args.Text);  
        }  
        this.AutoCompleteObj.Filter(filteredData, null);  
  
    }  

window.OnFillter = function (text) {  
    const service = new google.maps.places.AutocompleteService();  
    service.getQueryPredictions({ input: text }, function (predictions) {  
        filterResultCount = predictions && predictions.length;  
        return predictions;  
    });  
}  


Regards, 
Ponmani M 


PK Petter Kristensen March 29, 2022 04:32 AM UTC

Thank you for providing the sample with explanation and comments. I tried to run it but no results appeared whatever I typed. I replaced the key with my own. Still no results?


regards Petter


PM Ponmani Murugaiyan Syncfusion Team March 30, 2022 03:21 PM UTC

Hi Petter,


Based on your provided information, we suspect that the cause for the issue is if the filteredData return type mismatches with the provided type, so the variable will be returned null. We suggest you to make ensure in your application, the filteredData value type is matched to get the values in server-side as expected.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_Filter-908209660


filteredData = await JsRuntime.InvokeAsync<List<string>>("OnFillter", args.Text);  


Regards,

Ponmani M


MG Miles Gibson July 6, 2022 01:27 AM UTC

It doesn't seem to work with street addresses, can you comment further?


UD UdhayaKumar Duraisamy Syncfusion Team July 6, 2022 04:13 PM UTC

Hi Miles,


We are validating the requirement. We will update the further details in two business days(8th July 2022).


Regards,

Udhaya Kumar D


UD UdhayaKumar Duraisamy Syncfusion Team July 7, 2022 11:48 AM UTC

Hi Miles,


We have validated the reported query on our end. Unfortunately, we couldn’t reproduce the reported issue as per your scenario. We suspect that the result “No records found” is produced due to API key validation may be expired.
We request you to refer to the below public documentation regarding the API key.


Documentation: https://developers.google.com/maps/documentation/javascript/get-api-key



If you still facing the issue, we request you to provide additional details about the issue as mentioned below, This will help us validate the issue further and provide you with a better solution.


  1. Are you facing the issue in any particular scenario?
  2. Issue replication sample (or modify the above-attached sample).
  3. Issue replication steps.
  4. Video illustration of the issue.


Regards,

Udhaya Kumar D



RO Robert February 19, 2023 06:38 PM UTC

I've tried to use this today but i'm getting a null for filteredData  but I am getting a correct network response, I've tried using the filteredData as a list of objects of this class but no luck either.

public class AddressPredictions

    {

        public string description { get; set; }

        public Matched_Substrings[] matched_substrings { get; set; }

        public string place_id { get; set; }

        public string reference { get; set; }

        public Structured_Formatting structured_formatting { get; set; }

        public Term[] terms { get; set; }

        public string[] types { get; set; }



        public class Structured_Formatting

        {

            public string main_text { get; set; }

            public Main_Text_Matched_Substrings[] main_text_matched_substrings { get; set; }

            public string secondary_text { get; set; }

        }


        public class Main_Text_Matched_Substrings

        {

            public int length { get; set; }

            public int offset { get; set; }

        }


        public class Matched_Substrings

        {

            public int length { get; set; }

            public int offset { get; set; }

        }


        public class Term

        {

            public int offset { get; set; }

            public string value { get; set; }

        }


    }


RO Robert replied to Robert February 20, 2023 10:25 AM UTC

It's an issue with the js here:

window.OnFillter = function (text) {

    const service = new google.maps.places.AutocompleteService();
    service.getQueryPredictions({ input: text }, function (predictions) {
        filterResultCount = predictions && predictions.length;
        return predictions;
    });
   return "only this returns"
}
how do i get it to return predictions?

UD UdhayaKumar Duraisamy Syncfusion Team February 22, 2023 03:51 PM UTC

Ensure that you have a valid Google Maps API Key and that it is properly authorized to use the Places API. You can check the Google Cloud Console to confirm that the API key is set up properly and has the correct permissions. If you use an invalid API key, then "const service = new google.maps.places.AutocompleteService()" will be returned as null and the function will not be executed.

If you still encounter any issues or problems after providing a proper valid API Key, please share the following details, which will help us to validate the issue further and provide you with a better solution.


  1. A simple, runnable sample that illustrates the issue you are experiencing.

  2. issue replication steps.

  3. video illustration.


RO Robert February 22, 2023 04:03 PM UTC

I did say I was receiving the response.

I've modified the Javascript to include a call to a .NET method and have it all working.

Javascript

window.OnFillter = function (dotNetReference, parameters) {

    const service = new google.maps.places.AutocompleteService();

    service.getPlacePredictions(

        {

            input: parameters.text,

            sessiontoken: parameters.sessionId,

            componentRestrictions: { country: ['gb', 'ie'] },

        },

        function (predictions) {

            filterResultCount = predictions && predictions.length;

            dotNetReference.invokeMethodAsync('RetrievePredictions', predictions);

        }

    );

}



Razor

protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            objRef = DotNetObjectReference.Create(this);

            SessionToken = Guid.NewGuid();

        }

    }


public async Task OnFiltering(FilteringEventArgs args)

    {

        args.PreventDefaultAction = true;

        var query = new Query();

        if (args.Text != "")

        {

            parameters = new
            {

                Text = args.Text,

                SessionId = SessionToken.ToString()

            };

            await JSRuntime.InvokeVoidAsync("OnFillter", objRef, parameters);

        }

    }


    [JSInvokable]

    public void RetrievePredictions(List<AddressPredictions> predictions)

    {

        filteredData.Clear();

        addressPredictions.Clear();

        if (predictions != null)

        {

            addressPredictions = predictions;

            foreach (var item in predictions)

            {

                filteredData.Add(item.description);

            }

            this.AutoCompleteObj.FilterAsync(filteredData, null);

        }

    }


public void Dispose()

    {

        objRef?.Dispose();

    }



AddressPredictions class has been posted above.

Rob


UD UdhayaKumar Duraisamy Syncfusion Team February 23, 2023 05:35 PM UTC

Thanks for the update. Please get back to us if you need any further assistance on this. 


Loader.
Up arrow icon