Autocomplete with Google Place API

[markpointParticipant]

i don’t know what is wrong with this code. code is not working properly.

when i replace datatype: “jsonp” to datatype: “json” then it’s working in IE only but not working in other browser.

Please help me to resolve this issue.

$(document).ready(function () {

            $("#txtAddress").jqxInput({
                width: "99.5%", height: "25px", placeHolder: "Enter your address", source: function (query, response) {

                    var dataAdapter = new $.jqx.dataAdapter(
                        {
                            datatype: "jsonp",
                            datafields: [
                                { name: "predictions" },
                                { name: "description" },
                                { name: "id" },
                                { name: "place_id" }
                            ],
                            url: "https://maps.googleapis.com/maps/api/place/autocomplete/json",
                            data: {
                                types: "geocode",
                                language: "en",
                                key: "<strong>use Google Place PI key</strong>"
                            },
                            id: "id",
                            root: "predictions"
                        },
                        {
                            autoBind: true,
                            formatData: function (data) {
                                data.input = query;
                                return data;
                            },
                            loadComplete: function (data) {

                                if (data.predictions.length > 0) {
                                    response($.map(data.predictions, function (item) {
                                        return {
                                            label: item.description,
                                            value: item.place_id
                                        }
                                    }));
                                }
                            }
                        }
                        );
                    dataAdapter.dataBind();
                }
            });

            $("#txtAddress").focus();

        });

//-----------------------------HTML------------------------------

<input type="text" id="txtAddress" />

Thanks in advance.

[Peter StoevKeymaster]

Hi markpoint,

It will not work due to the reason that you cannot load data which is not in the same domain. That is why JSONP should be used instead of JSON. If you load data from the same domain use JSON, otherwise use JSONP. You can read more about it: http://en.wikipedia.org/wiki/JSONP

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[markpointParticipant]

we are using the datatype: “jsonp” only. but it’s not working in any browser.

In datatype: “jsonp” case data loaded from remote server but dataAdapter is not able to bind that data.

[Peter StoevKeymaster]

We have a working demo which shows that JSONP works fine with jqxDataAdapter and jqxInput. Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/remoteautocomplete.htm?arctic. On the Demo page you will find multiple working demos with JSONP. Also make sure that you run your code on a web server, not in the file system as Ajax calls work only with HTTP protocol.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[markpointParticipant]

In my case json data is received but on loadError function it returning parse Error.

like Error: jQuery21100218454621081845_1409905937822 was not called

——————————————————————————————————————————
This is header of my request
——————————————————————————————————————————

GET /maps/api/place/autocomplete/json?callback=jQuery21100218454621081845_1409905937822&types=geocode&language=en&key=#mykey#&input=rajkot&_=1409905953043 HTTP/1.1
Host: maps.googleapis.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive

——————————————————————————————————————————

[Peter StoevKeymaster]

Hi markpoint,

The server you’re calling should accept JSONP. Otherwise, this won’t work. The server may also require additional URL variables as well in order to handle JSONP.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts