google placecomplete plugin does not allow to select an address anymore

Question

I've been using this script: https://github.com/stephjang/placecomplete for many years with no issues. Tonight I received many complaints that users cannot select the address from the drop down menu. Typing in an address will work fine and results will show up but when trying to select an address, it does not do anything. Does anyone know if something has changed with google blocking placecomplete requests ?

My code:

$inputLocationSearch.placecomplete({ 
        placeholderText: "Enter your site location...", 
        requestParams: {
            componentRestrictions: {country: ['ca','us']}
        } 
    });

Screen shot of issue (mouse or keyboard CANNOT select an address found):

Answer 1

Found the issue within the plugin jquery.placecomplete.js code. Replaced default id parameter to use place_id, as id is deprecated with google autocomplete.

I added: apr["id"] = apr["place_id"]; above existing code: apr["text"] = apr["description"];

Here's the whole code block with the addition:

var select2options = $.extend({}, {
        query: function(query) {
            GooglePlacesAPI.getPredictions(query.term, requestParams)
                .done(function(aprs) {
                    var results = $.map(aprs, function(apr) {
                        // Select2 needs a "text" and "id" property set
                        // for each autocomplete list item. "id" is
                        // already defined on the apr object
                        apr["id"] = apr["place_id"];
                        apr["text"] = apr["description"];
                        return apr;
                    });
                    query.callback({results: results});
                })
                .fail(function(errorMsg) {
                    $el.trigger(pluginName + ":error", errorMsg);
                    query.callback({results: []});
                });
        },
        initSelection: function(element, callback) {
            // initSelection() was triggered by value being defined directly
            // in the input element HTML
            var initText = $el.val();

            // The id doesn't matter here since we're just trying to prefill
            // the input with text for the user to see.
            callback({id: 0, text: initText});
        },
        minimumInputLength: 1,
        selectOnBlur: true,
        allowClear: true,
        multiple: false,
        dropdownCssClass: "jquery-placecomplete-google-attribution",
        placeholder: this.options.placeholderText
    }, this.options);