Question

是否可以控制（启用/停用）Google商家信息自动填充SearchBox（google.maps.places.SearchBox）服务预测？

或换句话说：是否可以暂时从自动完成SearchBox服务中分离HTML输入元素，然后重新附加它？

问题是我显示的服务结果只是附加到SearchBox服务的HTML输入元素。问题是，在显示结果并且用户重新关注输入元素之后，预测将显示在结果上并遮挡其视图。我想禁用预测，直到用户更改input元素中的文本。

编辑26 / Aug / 2016 ：

Javascript API目前不支持禁用预测。因此，我刚刚在Google上发布了一项功能请求。如果您对该功能感兴趣，请投票赞成：Autocomplete SearchBox - Control (enable/disable) predictions.。

编辑07 / Sep / 2016 - 赏金奖励更新：

感谢所有参与回答和推广问题的人。

该奖项的主要目标是使用目前可用的方法找到解决方案。我担心这不会发生，所以我决定不给予赏金。

虽然下面的答案都没有提供解决方案，但每个都提供了某种形式，所以谢谢！也许这些线索将来会指向一个解决方案。

奖励的次要目标（虽然未直接传达）是为了宣传Autocomplete SearchBox - Control (enable/disable) predictions功能请求。其状态更改为NeatIdea，并已分配内部跟踪编号。这是一个好兆头。

Answer 1

您可以做的是，在用户选择地点后，您可以向该输入字段添加一个类disabled ..这将帮助您根据类名启用/禁用预测。

如果您有自动完成代码，可以将其包含在if else语句中。

let field = document.getElementById('location');
if ( field.className.indexOf('disabled') > -1 ) {
  google.maps.event.clearInstanceListeners(field);
}
else {

  let autocomplete = new google.maps.places.Autocomplete( field, {types: ['geocode']} );
  autocomplete.addListener('place_changed', () => {
    let place = autocomplete.getPlace();
    let filed_val = field.value; // incase you need it
    field.classList.add('disabled');
  });

}

这将删除用户选择地点后的自动填充功能..如果需要，您可以从此字段中删除disabled类，它将再次有效。

Answer 2

我在AngularJS中的解决方案 - 它是指令的摘录。

.pac-contained是在创建自动填充服务的实例后创建的，例如：new google.maps.places.Autocomplete(…)或new google.maps.places.SearchBox(…)。

我所做的是在文档中找到刚刚创建的.pac-container，存储其引用并将该容器标记为已处理（通过在其上添加任意类.predictions-control）。仅当预计应用程序中存在多个.pac-container时，才需要“标记”容器。

现在有了参考，我可以通过预测来控制.pac-contained的可见性（隐藏或显示）。

// Container element with predictions.
var pacContainer = null;

/***
 * Find predictions container without predictions-control class set.
 * Then set  predictions-control class to it and convert it into
 * Angular's jqLite object.
 * @return {jqLite object} - container or null when not found.
 */
function getPredictionsContainer() {
    // Get div.pac-container without predictions-control class.
    var e = document.querySelector('div.pac-container:not(.predictions-control)');
    if (e){
        var container = angular.element(e);
        container.addClass('predictions-control');
        console.log('predictions-control: Container found.');
        return container;
    } else {
        console.warn('predictions-control: Container not found!');
    }
    return null;
} // getPredictionsContainer

/***
 * Loop in 50ms intervals until container is found.
 */
function untilContainerFound(){
    pacContainer = getPredictionsContainer();
    if (pacContainer == null){
        $timeout(untilContainerFound, 50);
    }
} // untilContainerFound

this.init = function() {
    untilContainerFound();
}; // this.init

/***
 * Prevent predictions to be displayed when user clicks on the
 * input element. It is achieved by adding ng-hide CSS class to
 * predictions container. Predictions container is identified by
 * ".pac-container" CSS class selector.
 */
this.hidePredictions = function() {
    // If predictions container was not found at directive
    // initialization try to find it now.
    if (pacContainer === null){
        pacContainer = getPredictionsContainer();
    }
    if (pacContainer){
        console.log('predictions-control: Hiding predictions.');
        pacContainer.addClass('ng-hide');
    } else {
        console.warn('predictions-control: Container not found!');
    }
}; // this.hidePredictions

/***
 * Show predictions again by removing ng-hide CSS class from
 * predictions container.
 */
this.showPredictions = function() {
    console.log('predictions-control: Showing predictions.');
    if (pacContainer){
        pacContainer.removeClass('ng-hide');
    }
}; // this.showPredictions

在创建服务实例后立即调用init()：

// Create SearchBox service for auto completing search terms.
autocomplete = new google.maps.places.SearchBox( inputElem[0] );
// OR
// autocomplete = new google.maps.places.Autocomplete( ..... );
autocomplete .addListener('places_changed', callback);

predictionsCtrl.init();

注意：的只要保证不会同时创建两个自动完成服务（例如：每个服务位于不同的选项卡上），或者可以等待创建下一个服务，直到.pac-container找到以前的服务，它就可以正常工作即使有多个自动填充服务实例。

Answer 3

没有办法，或者说有一个重点：预测是SearchBox的全部要点，其原因是什么。如果您不想要预测，可以使用Text Search in the Places library。

如果用户再次点击/关注搜索框，他/她可能并不关心被建议模糊的结果。谷歌地图也有同样的行为，这不是问题，是吗？

如果你不能在SearchBox和结果之间留出一些空间（比如this tool），你绝对必须暂时禁用建议，我说你可以销毁{{ 1}}对象并稍后创建一个新对象，附加到相同的HTML输入元素。

Answer 4

可能有价值的信息。

这与API V3.29相关（不确定它是否始终准确） API为自动完成创建的div元素具有一个＆＃34; pac-container pac-logo＆＃34;的类。利用document.querySelector（＆＃39; .pac-container＆＃39;），您可以设置它的样式属性，以便在其他地方的点击事件中显示：none。
注意：当您的用户在searchBox中单击后，谷歌会将样式属性更改回适当的值，因此您只需将其设置一次，您就不必再将其设置回来。
（这可能比获得角度更容易和更清洁）。

希望能帮到某人（我必须添加一个CSS规则来增加应用程序中的z-index才能显示自动完成）

Google商家信息自动填充SearchBox：如何控制（启用/禁用）预测

4 个答案: