Google商家信息自动填充SearchBox:如何控制(启用/禁用)预测

Question

是否可以控制(启用/禁用)Google商家信息自动完成SearchBox(google.maps.places.SearchBox)服务预测？

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

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

编辑26/Aug/2016:

Javascript API目前不支持禁用预测.因此,我刚刚在Google上发布了一项功能请求.如果您对该功能感兴趣请投票支持:自动完成SearchBox - 控制(启用/禁用)预测..

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

感谢所有参与回答并促进提问的人.

该奖项的主要目标是使用现有的手段找到解决方案.我担心这不会发生,所以我决定不给予赏金.

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

奖励的次要目标(虽然没有直接传达)是为了促进自动完成SearchBox - 控制(启用/禁用)预测功能请求.其状态更改为NeatIdea,并已分配内部跟踪编号.这是一个好兆头.

Answer 1

我在 AngularJS \xe2\x80\x93 中的解决方案是从指令中提取的。

\n

.pac-contained在创建自动完成服务实例后创建，例如： new google.maps.places.Autocomplete(\xe2\x80\xa6)或new google.maps.places.SearchBox(\xe2\x80\xa6)。

\n

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

\n

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

\n

// Container element with predictions.\nvar pacContainer = null;\n\n/***\n * Find predictions container without predictions-control class set.\n * Then set  predictions-control class to it and convert it into\n * Angular's jqLite object.\n * @return {jqLite object} - container or null when not found.\n */\nfunction getPredictionsContainer() {\n    // Get div.pac-container without predictions-control class.\n    var e = document.querySelector('div.pac-container:not(.predictions-control)');\n    if (e){\n        var container = angular.element(e);\n        container.addClass('predictions-control');\n        console.log('predictions-control: Container found.');\n        return container;\n    } else {\n        console.warn('predictions-control: Container not found!');\n    }\n    return null;\n} // getPredictionsContainer\n\n/***\n * Loop in 50ms intervals until container is found.\n */\nfunction untilContainerFound(){\n    pacContainer = getPredictionsContainer();\n    if (pacContainer == null){\n        $timeout(untilContainerFound, 50);\n    }\n} // untilContainerFound\n\nthis.init = function() {\n    untilContainerFound();\n}; // this.init\n\n/***\n * Prevent predictions to be displayed when user clicks on the\n * input element. It is achieved by adding ng-hide CSS class to\n * predictions container. Predictions container is identified by\n * ".pac-container" CSS class selector.\n */\nthis.hidePredictions = function() {\n    // If predictions container was not found at directive\n    // initialization try to find it now.\n    if (pacContainer === null){\n        pacContainer = getPredictionsContainer();\n    }\n    if (pacContainer){\n        console.log('predictions-control: Hiding predictions.');\n        pacContainer.addClass('ng-hide');\n    } else {\n        console.warn('predictions-control: Container not found!');\n    }\n}; // this.hidePredictions\n\n/***\n * Show predictions again by removing ng-hide CSS class from\n * predictions container.\n */\nthis.showPredictions = function() {\n    console.log('predictions-control: Showing predictions.');\n    if (pacContainer){\n        pacContainer.removeClass('ng-hide');\n    }\n}; // this.showPredictions\n

\n

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

\n

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

\n

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

\n