如何在 angularjs 自动完成“iElement.autocomplete 不是函数”中修复此错误

Question

我必须为国家下拉菜单实现自动完成。我使用的是 angularjs 1.4 版本。

我参考了这个网站click here 来实现这个自动完成。

但它在实现上述代码时显示此错误“iElement.autocomplete is not a function”。是否有任何 js 文件我必须包含

这是我的html代码

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="countries" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

js文件

 var app = angular.module('MyModule', []);

    app.controller('DefaultCtrl', function($scope) 
    {
     $scope.countries = [ 
        {name: 'Afghanistan', code: 'AF'},
        {name: 'Antigua and Barbuda', code: 'AG'},
        {name: 'Bahamas', code: 'BS'},
        {name: 'Cambodia', code: 'KH'},
        {name: 'Cape Verde', code: 'CV'}];
    });


    app.directive('autoComplete', function($timeout) {
        return function(scope, iElement, iAttrs) {
                iElement.autocomplete({
                    source: scope[iAttrs.uiItems],
                    select: function() {
                        $timeout(function() {
                          iElement.trigger('input');
                        }, 0);
                    }
               });
        };
    });

提前谢谢你

Answer 1

您所指的示例似乎很旧（角度 1.0.0），我不确定这是否适用于当前的 1.5。无论如何，我建议您查看Typeahead 指令from Angular-UI。还有一个示例作为 plunker，您可以对其进行编辑以满足您的需求。

这是使用您的数据的working example。

HTML：

<div ng-controller="MainCtrl">
    <h4>Custom templates for results</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" uib-typeahead="country as country.name for country in countries | filter:{name:$viewValue}" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">
</div>

JS：

angular
  .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
  .controller('MainCtrl', function($scope, $http) {
    //ngModel value
    $scope.selected = undefined;
    //lookup values
    $scope.countries = [ 
      {name: 'Afghanistan', code: 'AF'},
      {name: 'Antigua and Barbuda', code: 'AG'},
      {name: 'Bahamas', code: 'BS'},
      {name: 'Cambodia', code: 'KH'},
      {name: 'Cape Verde', code: 'CV'}
    ];
  });