feat(autocomplete): Add orderBy option

src/auto-complete.js

@@ -25,14 +25,16 @@
  * becomes empty. The $query variable will be passed to the expression as an empty string.
  * @param {boolean=} [loadOnFocus=false] Flag indicating that the source option will be evaluated when the input element
  * gains focus. The current input value is available as $query.
+ * @param {string=} [orderBy=NA] The property to order the suggestions by. Prefix the property with '-' to change direction.
+ * E.g.: 'label' for ascending order or '-label' for descending order.
  * @param {boolean=} [selectFirstMatch=true] Flag indicating that the first match will be automatically selected once
  * the suggestion list is shown.
  * @param {expression=} [matchClass=NA] Expression to evaluate for each match in order to get the CSS classes to be used.
  * The expression is provided with the current match as $match, its index as $index and its state as $selected. The result
  * of the evaluation must be one of the values supported by the ngClass directive (either a string, an array or an object).
  * See https://docs.angularjs.org/api/ng/directive/ngClass for more information.
  */
-tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tagsInputConfig, tiUtil) {
+tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, $filter,tagsInputConfig, tiUtil) {
  function SuggestionList(loadFn, options, events) {
  var self = {}, getDifference, lastPromise, getTagId;
 
@@ -83,6 +85,11 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags
 
  items = tiUtil.makeObjectArray(items.data || items, getTagId());
  items = getDifference(items, tags);
+
+ if (options.orderBy) {
+ items = $filter('orderBy')(items, options.orderBy);
+ }
+
  self.items = items.slice(0, options.maxResultsToShow);
 
  if (self.items.length > 0) {
@@ -154,7 +161,8 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags
  loadOnEmpty: [Boolean, false],
  loadOnFocus: [Boolean, false],
  selectFirstMatch: [Boolean, true],
- displayProperty: [String, '']
+ displayProperty: [String, ''],
+ orderBy: [String, null]
  });
 
  $scope.suggestionList = new SuggestionList($scope.source, $scope.options, $scope.events);

test/auto-complete.spec.js

@@ -732,6 +732,42 @@ describe('autoComplete directive', function() {
  });
  });
 
+ describe('order-by option', function() {
+ it('initializes the option to null', function() {
+ // Arrange/Act
+ compile();
+
+ // Assert
+ expect(isolateScope.options.orderBy).toBeNull();
+ });
+
+ it('sorts the suggestions by text in ascending order', function() {
+ // Arrange
+ compile('order-by="text"');
+
+ // Act
+ loadSuggestions(3);
+
+ // Assert
+ expect(getSuggestions().length).toBe(3);
+ expect(getSuggestionText(0)).toBe('Item1');
+ expect(getSuggestionText(2)).toBe('Item3');
+ });
+
+ it('sorts the suggestions by text in descending order', function() {
+ // Arrange
+ compile('order-by="-text"');
+
+ // Act
+ loadSuggestions(3);
+
+ // Assert
+ expect(getSuggestions().length).toBe(3);
+ expect(getSuggestionText(0)).toBe('Item3');
+ expect(getSuggestionText(2)).toBe('Item1');
+ });
+ });
+
  describe('debounce-delay option', function() {
  it('initializes the option to 100 milliseconds', function() {
  // Arrange/Act