如何延迟谷歌自动完成功能以节省信用

Question

正如你所知，每次我们输入谷歌地图时，自动完成都会触发，我想为此设置一个延迟功能，例如 250 毫秒，这样给用户更多的输入时间并节省积分。我尝试添加 $timeout，但看起来它对我不起作用。请你帮我看看这个好吗？提前谢谢。 html:

<input name="google_places_ac" type="text" class="google_places_ac input-block-level" ng-model="address" placeholder="Please enter a location" ng-blur="updateMap()"/>

指令：

 link: function($scope, elm, attrs) {  

                    $timeout(function(){

                    var autocomplete = new google.maps.places.Autocomplete($(elm).find(".google_places_ac")[0], {});  
                    google.maps.event.addListener(autocomplete, 'place_changed', function() {
                             var place = autocomplete.getPlace();
                            $scope.address = place.formatted_address;
                            $scope.location = {
                                formatted_address: place.formatted_address,
                                loglat: place.geometry.location
                            };
                            $scope.$apply();
                            //pop up the event and index(if needed)
                            $scope.$emit('updatemap',$scope.indexposition);
                        });
                    },1000);
}

每次我尝试输入搜索输入时，它都会立即弹出搜索结果列表，有什么办法可以延迟吗？所以用户可以输入更多的字符？

Answer 1

这是我所做的解决方案，希望对您有所帮助：

let lastCall = Date.now()

function initMap(){
    var options = {
        types: ['address'],
        componentRestrictions: {country: "es"}
    };

    var input = $('#pac-input')[0];
    if(input){
        var autocomplete = new google.maps.places.Autocomplete(input, options);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            let coords = autocomplete.getPlace().geometry.location
            register([coords.lat(),coords.lng()])
        });
        $('#pac-input').keypress(function(event){
            let miliseconds = (Date.now() - lastCall)
            if(miliseconds <= 3000){
                event.preventDefault()
                $('#pac-input').val($('#pac-input').val()+event.key)
                setTimeout(function(){
                    google.maps.event.trigger($('#pac-input')[0],'focus',{});
                    lastCall = Date.now()
                }, 2999);
            }
            lastCall = Date.now()
        });
    }
}

Answer 2

如果你使用 Angularjs，你可以试试这个：

ng-model-options="{ debounce: 200 }"

其中 200 - 以毫秒为单位的延迟

我的自动完成字段代码如下：

<input g-places-autocomplete 
           force-selection="true"
           enter="home.doSearch()"
           type="text"
           class="form-control"
           id="searchAddress"
           ng-model="home.searchAddress"
           name="searchAddress"
           options="home.autocompleteOptions"
           ng-model-options="{ debounce: 1500 }"
           autocomplete="off"
           placeholder="{{ 'YOUR_ROADTRIP_BEGINS' | translate }}"
           ng-keyup="home.checkForEnterButton($event)"
    >

Answer 3

我在搜索之前检查要输入的第一个 a-z 字符...似乎节省了一些元素查找。至少它从一开始就得到了一些相关的返回数据。请注意，这将在字母字符之后的下一个输入值上开始显示结果。您可能希望使用空格/空白作为触发器（例如... .value.match(/\s/)）。 此外，您可能希望使用 Options 来指定 ComponentRestrictions 或 Bounds。这是文档的链接。 https://developers.google.com/maps/documentation/javascript/places-autocomplete

$scope.getDestinationLocation = function () {
    if (document.getElementById("daddress1").value.match(/[a-z]/i)) {
        var options = {
            types: ['address'],
            componentRestrictions: { country: "us" }
        };
        var autocomplete = new google.maps.places.Autocomplete(
           (document.getElementById("daddress1")),
             options);
        autocomplete.addListener('place_changed', $.proxy(function () {
            var place = autocomplete.getPlace();
        ....

Answer 4

目前您无法通过 Maps JavaScript API 控制 Autocomplete 元素的地点预测请求的频率。

但是，公共问题跟踪器中有一个功能请求：

https://code.google.com/p/gmaps-api-issues/issues/detail?id=5831

Google 将此功能请求标记为已接受。我可以建议在此功能请求上加注星标，以表达您的兴趣并从 Google 获得进一步的更新。

Answer 5

你可以做一个带有超时的条件来处理这个

if(!$scope.isDelayed){
  $scope.isDelayed = true;
  $timeout(function(){
     //call google maps api
     $scope.isDelayed = false;
  }, 2500)
}

这样你将每 2500 毫秒调用一次，在你之前的代码中它总是会被执行，你只是在延迟执行，但是试试这个。