Question

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

然后我遇到了一个小提琴 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个有效字符后才显示选项。

谢谢， Ankit Tanna

Answer 1

您可以使用minLength选项：

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

Angular JS和jQuery UI自动完成功能

1 个答案: