feat(autocomplete): adds a new attribute option md-select-on-match

When enabled, an exact match in the `searchText` will automatically select a matching item if (a) there is exactly one match found and (b) the `searchText` matches the display value exactly Closes #3324
angular · Jul 20, 2015 · db58e5d · db58e5d
1 parent d203d72
commit db58e5d
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 5 deletions.
diff --git a/src/components/autocomplete/autocomplete.spec.js b/src/components/autocomplete/autocomplete.spec.js
@@ -28,7 +28,7 @@ describe('<md-autocomplete>', function () {
   }
 
   describe('basic functionality', function () {
-    it('should update selected item and search text', inject(function ($timeout, $mdConstant, $rootElement) {
+    it('should update selected item and search text', inject(function ($timeout, $mdConstant) {
       var scope    = createScope();
       var template = '\
           <md-autocomplete\
@@ -136,7 +136,6 @@ describe('<md-autocomplete>', function () {
             <span md-highlight-text="searchText">{{item.display}}</span>\
           </md-autocomplete>';
       var element  = compile(template, scope);
-      var ctrl     = element.controller('mdAutocomplete');
       var ul       = element.find('ul');
 
       expect(scope.searchText).toBe('');
@@ -152,7 +151,7 @@ describe('<md-autocomplete>', function () {
   });
 
   describe('API access', function () {
-    it('should clear the selected item', inject(function ($timeout, $mdConstant) {
+    it('should clear the selected item', inject(function ($timeout) {
       var scope    = createScope();
       var template = '\
           <md-autocomplete\
@@ -187,7 +186,7 @@ describe('<md-autocomplete>', function () {
       expect(scope.selectedItem).toBe(null);
     }));
 
-    it('should notify selected item watchers', inject(function ($timeout, $mdConstant) {
+    it('should notify selected item watchers', inject(function ($timeout) {
       var scope            = createScope();
       var scopeItemChanged = 1;
       scope.itemChanged    = jasmine.createSpy('itemChanged');
@@ -237,7 +236,7 @@ describe('<md-autocomplete>', function () {
       expect(scope.itemChanged.calls.mostRecent().args[ 0 ]).toBeNull();
       expect(scope.selectedItem).toBeNull();
     }));
-    it('should pass value to item watcher', inject(function ($timeout, $mdConstant) {
+    it('should pass value to item watcher', inject(function ($timeout) {
       var scope         = createScope();
       var itemValue     = null;
       var template      = '\
@@ -272,4 +271,53 @@ describe('<md-autocomplete>', function () {
       element.scope().$apply();
     }));
   });
+
+  describe('md-select-on-match', function () {
+    it('should select matching item on exact match when `md-select-on-match` is toggled', inject(function ($timeout) {
+      var scope    = createScope();
+      var template = '\
+          <md-autocomplete\
+              md-select-on-match\
+              md-selected-item="selectedItem"\
+              md-search-text="searchText"\
+              md-items="item in match(searchText)"\
+              md-item-text="item.display"\
+              placeholder="placeholder">\
+            <span md-highlight-text="searchText">{{item.display}}</span>\
+          </md-autocomplete>';
+      var element  = compile(template, scope);
+
+      expect(scope.searchText).toBe('');
+      expect(scope.selectedItem).toBe(null);
+
+      element.scope().searchText = 'foo';
+      element.scope().$apply();
+      $timeout.flush();
+
+      expect(scope.selectedItem).not.toBe(null);
+      expect(scope.selectedItem.display).toBe('foo');
+    }));
+  });
+  it('should not select matching item on exact match when `md-select-on-match` is NOT toggled', inject(function ($timeout) {
+    var scope    = createScope();
+    var template = '\
+          <md-autocomplete\
+              md-selected-item="selectedItem"\
+              md-search-text="searchText"\
+              md-items="item in match(searchText)"\
+              md-item-text="item.display"\
+              placeholder="placeholder">\
+            <span md-highlight-text="searchText">{{item.display}}</span>\
+          </md-autocomplete>';
+    var element  = compile(template, scope);
+
+    expect(scope.searchText).toBe('');
+    expect(scope.selectedItem).toBe(null);
+
+    element.scope().searchText = 'foo';
+    element.scope().$apply();
+    $timeout.flush();
+
+    expect(scope.selectedItem).toBe(null);
+  }));
 });
diff --git a/src/components/autocomplete/js/autocompleteController.js b/src/components/autocomplete/js/autocompleteController.js
@@ -529,6 +529,7 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
       if (searchText !== $scope.searchText) return; //-- just cache the results if old request
       ctrl.matches = matches;
       ctrl.hidden  = shouldHide();
+      if ($scope.selectOnMatch) selectItemOnMatch();
       updateMessages();
       positionDropdown();
     }
@@ -593,4 +594,13 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
     if (hasFocus) ctrl.hidden = shouldHide();
   }
 
+  function selectItemOnMatch () {
+    var searchText = $scope.searchText,
+        matches    = ctrl.matches,
+        item       = matches[ 0 ];
+    if (matches.length === 1) getDisplayValue(item).then(function (displayValue) {
+      if (searchText == displayValue) select(0);
+    });
+  }
+
 }
diff --git a/src/components/autocomplete/js/autocompleteDirective.js b/src/components/autocomplete/js/autocompleteDirective.js
@@ -128,6 +128,7 @@ function MdAutocomplete () {
       itemText:       '&mdItemText',
       placeholder:    '@placeholder',
       noCache:        '=?mdNoCache',
+      selectOnMatch:  '=?mdSelectOnMatch',
       itemChange:     '&?mdSelectedItemChange',
       textChange:     '&?mdSearchTextChange',
       minLength:      '=?mdMinLength',