Angular JS和jQuery UI自動完成功能

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塔納

Answer 1

可以使用minLength選項：

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