feat(autocomplete): adds md-input-id to allow the user to provide a custom ID for autocomplete input field

Closes #3481

Author: Robert Messerle

src/components/autocomplete/autocomplete.spec.js

@@ -69,6 +69,43 @@ describe('<md-autocomplete>', function () {
       expect(scope.searchText).toBe('foo');
       expect(scope.selectedItem).toBe(scope.match(scope.searchText)[ 0 ]);
     }));
+
+    it('should allow you to set an input id without floating label', inject(function () {
+      var scope    = createScope(null, { inputId: 'custom-input-id' });
+      var template = '\
+          <md-autocomplete\
+              md-input-id="{{inputId}}"\
+              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);
+      var input    = element.find('input');
+
+      expect(input.attr('id')).toBe(scope.inputId);
+    }));
+
+    it('should allow you to set an input id without floating label', inject(function () {
+      var scope    = createScope(null, { inputId: 'custom-input-id' });
+      var template = '\
+          <md-autocomplete\
+              md-floating-label="Some Label"\
+              md-input-id="{{inputId}}"\
+              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);
+      var input    = element.find('input');
+
+      expect(input.attr('id')).toBe(scope.inputId);
+    }));
   });
 
   describe('basic functionality with template', function () {

src/components/autocomplete/js/autocompleteDirective.js

@@ -56,6 +56,7 @@ angular
  *     `md-input-container`
  * @param {string=} md-input-name The name attribute given to the input element to be used with
  *     FormController
+ * @param {string=} md-input-id An ID to be added to the input element
  * @param {number=} md-input-minlength The minimum length for the input's value for validation
  * @param {number=} md-input-maxlength The maximum length for the input's value for validation
  * @param {boolean=} md-select-on-match When set, autocomplete will automatically select exact
@@ -138,7 +139,8 @@ function MdAutocomplete () {
       autofocus:      '=?mdAutofocus',
       floatingLabel:  '@?mdFloatingLabel',
       autoselect:     '=?mdAutoselect',
-      menuClass:      '@?mdMenuClass'
+      menuClass:      '@?mdMenuClass',
+      inputId:        '@?mdInputId'
     },
     template:     function (element, attr) {
       var noItemsTemplate = getNoItemsTemplate(),
@@ -201,7 +203,7 @@ function MdAutocomplete () {
             <md-input-container flex ng-if="floatingLabel">\
               <label>{{floatingLabel}}</label>\
               <input type="search"\
-                  id="fl-input-{{$mdAutocompleteCtrl.id}}"\
+                  id="{{ inputId || \'fl-input-\' + $mdAutocompleteCtrl.id }}"\
                   name="{{inputName}}"\
                   autocomplete="off"\
                   ng-required="$mdAutocompleteCtrl.isRequired"\
@@ -223,7 +225,7 @@ function MdAutocomplete () {
         } else {
           return '\
             <input flex type="search"\
-                id="input-{{$mdAutocompleteCtrl.id}}"\
+                id="{{ inputId || \'input-\' + $mdAutocompleteCtrl.id }}"\
                 name="{{inputName}}"\
                 ng-if="!floatingLabel"\
                 autocomplete="off"\