Question

我正在尝试使用Google地方信息自动完成功能来创建自动完成城市名称的输入。自动填充字段用于从自动填充列表中点击时选择城市。它在桌面上运行良好，但在移动设备上运行不正常当我选择我想要的城市时，它不会隐藏自动完成列表或将城市设置为输入的值。

我的指示如下：

angular.module（'googlePlacesAutocomplete'，[]） .directive（'gPlacesAutocomplete'，gPlacesAutocomplete）;

function gPlacesAutocomplete ($timeout) {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: postLink
    }

    function postLink (scope, element, attrs, ngModel ) {
        var options = {
            types: ['(cities)'],
            componentRestrictions: {}
        };

        var autocoplete = new google.maps.places.Autocomplete(element[0]);
        autocoplete.setTypes(options.types);

        autocoplete.addListener('place_changed', function(evt) {
            scope.$apply(function() {
                ngModel.$setViewValue(element.val());  
            }); 
        });

        ngModel.$render = function() {
            element.val(ngModel.$viewValue || '');
        };       
    }
}

我看到很多解决方案建议在指令中添加以下事件将解决问题：

$timeout(function() {
    var container = document.getElementsByClassName('pac-container');
    angular.element(container).attr('data-tap-disabled', 'true');
    angular.element(container).on("click", function(event){
        element.blur();
    }); },500);

我已经尝试过，但它没有解决问题。一旦我添加此解决方案，自动完成隐藏，但模型不会更新所选城市。我正在使用Angular Material和API。

HTML看起来像这样：

<div class="col-xs-12 col-md-5">
     <md-input-container class="md-block">
           <label>From</label>
           <input g-places-autocomplete autocomplete="off" id="origin" ng-focus="vm.disableTap('origin')" type="text" name="origin" ng-model="vm.query.origin">
      </md-input-container>
</div>

任何人都可以提供更多见解吗？我错过了什么我已经阅读了许多帖子，将其归因于快速点击。

您可以在Trypp.com

上查看实时示例并在移动设备上试用

非常感谢任何帮助。

Google将自动填充Angular指令置于触控设备上

0 个答案: