是否可以控制(启用/禁用)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,并已分配内部跟踪编号。这是一个好兆头。
5条答案
按热度按时间km0tfn4u1#
您可以做的是,用户选择地点后,您可以添加一个类
disabled
到该输入字段..,这将帮助您启用/禁用基于类名称的预测。如果有自动完成代码,可以将其 Package 在if else语句中。
这将在用户选择一个地点后删除自动完成。如果需要,以后可以从该字段中删除
disabled
类,它将再次工作。8ljdwjyq2#
我在AngularJS中的解决方案-它是从一个指令中提取的。
.pac-contained
是在创建自动完成服务的示例之后创建的,例如:new google.maps.places.Autocomplete(…)
或new google.maps.places.SearchBox(…)
。我所做的是在文档中找到刚刚创建的
.pac-container
,存储其引用并将该容器标记为已经处理(通过在其上添加任意类.predictions-control
)。仅当应用程序中预期存在多个.pac-container
时才需要“标记”容器。现在有了引用,我可以通过预测控制
.pac-contained
的可见性(隐藏或显示)。创建服务示例后立即调用
init()
:.pac-container
,则即使对于自动完成服务的多个示例,它也可靠地工作。iezvtpos3#
没有办法,也没有什么意义:预测是SearchBox的全部功能,也是它存在的理由。如果你不需要预测,你可以使用地点库中的文本搜索。
如果用户再次点击/关注搜索框,他/她可能并不在意搜索结果会被建议所掩盖,谷歌Map中也有同样的行为,这不是问题,对吧?
如果您不能在SearchBox和结果之间放置一些空间(如在this tool中),并且您必须暂时禁用建议,我建议您可以销毁
google.maps.places.SearchBox
对象,然后创建一个新对象,并将其附加到同一个HTML input元素。x3naxklr4#
可能是有价值的信息。
这与API V3.29相关(不确定是否始终准确)。
API为自动完成创建的div元素有一个类“pac-container pac-logo”。
利用document.querySelector('. pac-container'),您可以设置它的style属性以显示:在别处的点击事件上没有。
注意:当你的用户点击searchBox中的back时,google会将style属性改回合适的值,所以你只需要设置一次,你不应该再设置一次。
(this可能比涉及Angular 更容易和更干净)。
希望这对某些人有所帮助(我不得不添加一个CSS规则来增加应用程序中的z索引,以使自动完成功能显示出来)
2wnc66cl5#
如果您将disabled属性添加到文本框,则将禁用预测。
使用readonly属性则不会。
这在某些情况下可能会有所帮助。