fix(autocomplete): fix a couple of js errors and log a warning if the display value isn't a string

* Fixes a couple of JS errors in the autocomplete that were caused by assumptions that the input would always be a string.
* Adds a warning for cases where the display value doesn't evaluate to a string.
* Cleans up a few redundant expressions.

**Note:** There's still a JS error when clearing the value, but it should be fixed with #9221.

Fixes #9242.

Closes #9251

Author: crisbeto

src/components/autocomplete/autocomplete.spec.js

@@ -35,7 +35,7 @@ describe('<md-autocomplete>', function() {
 
       scope.asyncMatch = function(term) {
         return $timeout(function() {
-          return scope.match(term)
+          return scope.match(term);
         }, 1000);
       };
 
@@ -702,7 +702,7 @@ describe('<md-autocomplete>', function() {
         return {display: item};
       });
       var scope = createScope(myItems);
-      
+
       var template = '\
           <md-autocomplete\
               md-selected-item="selectedItem"\
@@ -740,7 +740,7 @@ describe('<md-autocomplete>', function() {
 
       expect(scope.searchText).toBe('foo ');
       expect(scope.selectedItem).toBe(scope.match(scope.searchText)[0]);
-      
+
       ctrl.clear();
       $timeout.flush();
 
@@ -1125,6 +1125,32 @@ describe('<md-autocomplete>', function() {
       element.remove();
     }));
 
+    it('should log a warning if the display text does not evaluate to a string',
+      inject(function($log) {
+        spyOn($log, 'warn');
+
+        var scope = createScope();
+
+        var template =
+          '<md-autocomplete ' +
+              'md-selected-item="selectedItem" ' +
+              'md-search-text="searchText"' +
+              'md-items="item in match(searchText)"> ' +
+          '</md-autocomplete>';
+
+        var element = compile(template, scope);
+
+        scope.$apply(function() {
+          scope.selectedItem = { display: 'foo' };
+        });
+
+        expect($log.warn).toHaveBeenCalled();
+        expect($log.warn.calls.mostRecent().args[0]).toMatch(/md-item-text/);
+
+        element.remove();
+      })
+    );
+
   });
 
   describe('xss prevention', function() {

src/components/autocomplete/js/autocompleteController.js

@@ -8,7 +8,7 @@ var ITEM_HEIGHT   = 41,
     INPUT_PADDING = 2; // Padding provided by `md-input-container`
 
 function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming, $window,
-                             $animate, $rootElement, $attrs, $q) {
+                             $animate, $rootElement, $attrs, $q, $log) {
 
   // Internal Variables.
   var ctrl                 = this,
@@ -194,7 +194,7 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
 
     angular.element($window).off('resize', positionDropdown);
     if ( elements ){
-      var items = 'ul scroller scrollContainer input'.split(' ');
+      var items = ['ul', 'scroller', 'scrollContainer', 'input'];
       angular.forEach(items, function(key){
         elements.$[key].remove();
       });
@@ -207,8 +207,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
   function gatherElements () {
     elements = {
       main:  $element[0],
-      scrollContainer: $element[0].getElementsByClassName('md-virtual-repeat-container')[0],
-      scroller: $element[0].getElementsByClassName('md-virtual-repeat-scroller')[0],
+      scrollContainer: $element[0].querySelector('.md-virtual-repeat-container'),
+      scroller: $element[0].querySelector('.md-virtual-repeat-scroller'),
       ul:    $element.find('ul')[0],
       input: $element.find('input')[0],
       wrap:  $element.find('md-autocomplete-wrap')[0],
@@ -290,7 +290,7 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
     return function() {
       element.off('wheel', preventDefault);
       element.off('touchmove', preventDefault);
-    }
+    };
   }
 
   /**
@@ -335,7 +335,7 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
         // Clear the searchText, when the selectedItem is set to null.
         // Do not clear the searchText, when the searchText isn't matching with the previous
         // selected item.
-        if (displayValue.toLowerCase() === $scope.searchText.toLowerCase()) {
+        if (displayValue.toString().toLowerCase() === $scope.searchText.toLowerCase()) {
           $scope.searchText = '';
         }
       });
@@ -531,7 +531,14 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
    * @returns {*}
    */
   function getDisplayValue (item) {
-    return $q.when(getItemText(item) || item);
+    return $q.when(getItemText(item) || item).then(function(itemText) {
+      if (itemText && !angular.isString(itemText)) {
+        $log.warn('md-autocomplete: Could not resolve display value to a string. ' +
+          'Please check the `md-item-text` attribute.');
+      }
+
+      return itemText;
+    });
 
     /**
      * Getter function to invoke user-defined expression (in the directive)

src/components/autocomplete/js/highlightController.js

@@ -16,7 +16,7 @@ function MdHighlightCtrl ($scope, $element, $attrs) {
           };
         }, function (state, prevState) {
           if (text === null || state.unsafeText !== prevState.unsafeText) {
-            text = angular.element('<div>').text(state.unsafeText).html()
+            text = angular.element('<div>').text(state.unsafeText).html();
           }
           if (regex === null || state.term !== prevState.term) {
             regex = getRegExp(state.term, flags);
@@ -28,7 +28,7 @@ function MdHighlightCtrl ($scope, $element, $attrs) {
   }
 
   function sanitize (term) {
-    return term && term.replace(/[\\\^\$\*\+\?\.\(\)\|\{}\[\]]/g, '\\$&');
+    return term && term.toString().replace(/[\\\^\$\*\+\?\.\(\)\|\{}\[\]]/g, '\\$&');
   }
 
   function getRegExp (text, flags) {