igCombo with googleapis | Infragistics Forums

igCombo with googleapis

Peter Hedman posted over 7 years ago

Hi, I wounder if there is a way to get cities from googleapis.

$("#selectLocation").igCombo({
    loadOnDemandSettings: {
        enabled: true,
  pageSize: 25
 },
 autoComplete: true,
 requestType : "get",
 filteringType: "remote",
 responseDataKey: "predictions",
 valueKey: "description",
 textKey: "description",
 itemTemplate: "${description}",
 width: "100%",
 height: "48px",
 dataSource: 'https://maps.googleapis.com/maps/api/place/autocomplete/json?key=xxxxx&types=(cities)&language=sv&region=se&input=??????',
 responseDataType: "json",
 placeHolder: "City"

});

Google needs the "input" parameter to return search results

Example:

GetRequest: https://maps.googleapis.com/maps/api/place/autocomplete/json?key=XXXX&types=(cities)&language=sv&region=se&input=karl

Returns:

{
"predictions": [
    {
      "description": "Karlskrona",
      "id": "df1ab6dd7852b9cef64ca81e91291e80b9d01840",

SO THE QUESTON:

How to add the input parameter in the generated get request, or is there another way of getting cities into igCombo from google apis?

Br,

Peter

18204

Offline [Infragistics] Michael H. posted over 7 years ago

Hello Peter,

Thank you for posting in our forums!

After some research, it looks like Google requires you to make your requests from the server. So what you should do is make a request to your server which will fetch the data from Google, and then send it back to the client browser.

To do this, you would set the igCombo's dataSource to your server's method that queries Google.

I have attached a simple MVC sample that demonstrates this. If you have any further questions or concerns with this, please let me know.

igCombo_GoogleAPIsData.zip
Cancel
Reply

Cancel

Peter Hedman posted over 7 years ago in reply to [Infragistics] Michael H.

Hello Michael,

I don't know how to open your MVC sample, newer worked with asp.net.

Any How.. I made a working example, but there is some glitches... Because when i set the new dataSource the form resets and the typed text aswell. My solution was to use the itemsRendred event, and set the input value to the typed in text after the dataSource is updated. I wonder is there a better way to do this, because there is some flickering when typing, and that is a bit annoying.

function getCitiesFromGoogleAPIs(input, selector)
{

    var autocompleteService = new google.maps.places.AutocompleteService();

 function updatePredictions(predictions, status) 
    {

        if (google.maps.places.PlacesServiceStatus.OK != status) 
        {
            return;
 }

        var citiesBuilder = [];

 $.each(predictions, function(i, prediction) 
        {
            citiesBuilder.push(prediction.terms[0].value);
 });

 var citiesBuilderData = new $.ig.DataSource({
                type: "json",
 dataSource: JSON.stringify(citiesBuilder)
            }
        );

 // updates the igCombo with new dataSource (google search result)
 $(selector).igCombo("option", "dataSource", citiesBuilderData);

 }

    var params =
        {
            input: input,
 types: ['(cities)'],
 componentRestrictions: {
                country: 'SE'
 }
        };

 autocompleteService.getPlacePredictions(params, updatePredictions);

 $(document).delegate(selector, "igcomboitemsrendered", function (evt, ui)
    {
        // inserts the searched value in the input field after dataSource refresh
 $(selector).val(input);
 });

}


$("#selectLocation").igCombo(
{
    delayInputChangeProcessing : 500,
 width: "100%",
 height: "48px",
 placeHolder: "City",
 filtering: function (evt, ui) {
        getCitiesFromGoogleAPIs(ui.expression[0].expr, "#selectLocation");
 }
});