0

我正在尝试将此主页转换为 AMP：excurj.com。有没有办法在英雄搜索字段中保留自动完成功能？

我看到了这个问题。但是，我需要这两个脚本来使自动完成工作：

<script src="{% static 'js/autocomplete.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=*****&callback=initMap&libraries=places"></script>

这是 autocomplete.js 里面的内容：

// script to auto complete location

function initMap() {

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, 91), new google.maps.LatLng(-180, 80));
var options = {
types: ['(cities)'],
bounds: defaultBounds
};
var input = document.getElementById('google_city_search');

var autocomplete = new google.maps.places.Autocomplete(input, options);
}
4

1 回答 1

0

我知道有两种方法：

  • 将页面的自动完成部分放在单独的页面中并用于amp-iframe显示它。

  • amp-list与 一起使用来amp-bind实现您自己的自动完成功能。

据我所知，谷歌还没有提供 AMP 版本的 Place Autocomplete。前段时间我自己也在为此苦苦挣扎，一开始使用的是 iframe 方法。但是由于 iframe 的加载有明显的延迟，并且自动完成基本上是页面的主要部分，所以我最终使用第二种方法来完成它。

有一个很好的例子来说明如何在AMP上实现自动完成功能。

我专门为 Google Place Autocomplete 制作了该示例的修改版本，您可以在此处查看。

第二种方法有一个缺点：速度稍慢，因为自动完成请求必须通过您的服务器才能到达 Google 的服务器。

于 2018-03-17T20:20:45.570 回答