Angular JS 和 jQuery UI 自动完成功能

Question

我正在尝试使用纯 angular 构建自动完成功能，但不幸的是 UI 有点难以处理。我开始用 jQuery UI 构建它。

然后我遇到了一个Fiddle http://jsfiddle.net/sebmade/swfjT/light/

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



function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

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

我只想在用户输入 3 个有效字符后显示选项。

谢谢， 安吉塔纳

Answer 1

您可以使用 minLength 选项：

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