javascript Google地点自动完成搜索框:如何控制(启用/禁用)预测

gg0vcinb  于 2023-01-04  发布在  Java
关注(0)|答案(5)|浏览(136)

是否可以控制(启用/禁用)Google Places自动完成搜索框(google.maps.places.SearchBox)服务预测?
或者换句话说:是否可以暂时将HTML输入元素从自动完成SearchBox服务中分离出来,然后再重新附加?
问题是,我显示服务结果就在附加到SearchBox服务的HTML输入元素下面。问题是,显示结果后,用户重新关注输入元素,预测显示在结果上,并模糊了它们的视图。我想禁用预测,直到用户更改输入元素中的文本。

    • 编辑日期:2016年8月26日**:

Javascript API目前不支持禁用预测。因此,我刚刚在Google上打开了一个功能请求。如果您对该功能感兴趣,请投票支持:Autocomplete SearchBox - Control (enable/disable) predictions..

    • 编辑2016年9月7日-奖金奖励更新**:

感谢所有参与回答和提出这个问题的人。
奖励的主要目的是利用现有的手段找到解决方案。我担心这没有发生,所以我决定不奖励奖金。
虽然下面的答案都没有提供解决方案,但每一个都提供了某种线索,所以谢谢你!也许这些线索将来会指向解决方案。
该奖项的次要目标(虽然没有直接沟通)是促进Autocomplete SearchBox - Control (enable/disable) predictions功能请求。它的状态更改为NeatIdea,并已分配内部跟踪编号。这是一个好兆头。

km0tfn4u

km0tfn4u1#

您可以做的是,用户选择地点后,您可以添加一个类disabled到该输入字段..,这将帮助您启用/禁用基于类名称的预测。
如果有自动完成代码,可以将其 Package 在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类,它将再次工作。

8ljdwjyq

8ljdwjyq2#

我在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,则即使对于自动完成服务的多个示例,它也可靠地工作。
iezvtpos

iezvtpos3#

没有办法,也没有什么意义:预测是SearchBox的全部功能,也是它存在的理由。如果你不需要预测,你可以使用地点库中的文本搜索。
如果用户再次点击/关注搜索框,他/她可能并不在意搜索结果会被建议所掩盖,谷歌Map中也有同样的行为,这不是问题,对吧?
如果您不能在SearchBox和结果之间放置一些空间(如在this tool中),并且您必须暂时禁用建议,我建议您可以销毁google.maps.places.SearchBox对象,然后创建一个新对象,并将其附加到同一个HTML input元素。

x3naxklr

x3naxklr4#

可能是有价值的信息。
这与API V3.29相关(不确定是否始终准确)。
API为自动完成创建的div元素有一个类“pac-container pac-logo”。
利用document.querySelector('. pac-container'),您可以设置它的style属性以显示:在别处的点击事件上没有。
注意:当你的用户点击searchBox中的back时,google会将style属性改回合适的值,所以你只需要设置一次,你不应该再设置一次。
(this可能比涉及Angular 更容易和更干净)。
希望这对某些人有所帮助(我不得不添加一个CSS规则来增加应用程序中的z索引,以使自动完成功能显示出来)

2wnc66cl

2wnc66cl5#

如果您将disabled属性添加到文本框,则将禁用预测。
使用readonly属性则不会。
这在某些情况下可能会有所帮助。

相关问题