Added limit to autocomplete and fixed multiple init bugs and added te…

…sting

_SpecRunner.html

@@ -32,6 +32,8 @@
 
   <script src="bin/materialize.js"></script>
 
+  <script src="tests/spec/autocomplete/autocompleteSpec.js"></script>
+
   <script src="tests/spec/cards/cardsSpec.js"></script>
 
   <script src="tests/spec/collapsible/collapsibleSpec.js"></script>

forms.html

@@ -976,7 +976,8 @@ <h4>Initialization</h4>
       "Apple": null,
       "Microsoft": null,
       "Google": 'http://placehold.it/250x250'
-    }
+    },
+    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
   });
         </code></pre>
       </div>

jade/page-contents/forms_content.html

@@ -863,7 +863,8 @@ <h4>Initialization</h4>
       "Apple": null,
       "Microsoft": null,
       "Google": 'http://placehold.it/250x250'
-    }
+    },
+    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
   });
         </code></pre>
       </div>

js/forms.js

@@ -283,28 +283,41 @@
     $.fn.autocomplete = function (options) {
       // Defaults
       var defaults = {
-        data: {}
+        data: {},
+        limit: Infinity
       };
 
       options = $.extend(defaults, options);
 
       return this.each(function() {
         var $input = $(this);
         var data = options.data,
+            count = 0,
             $inputDiv = $input.closest('.input-field'); // Div to append on
 
         // Check if data isn't empty
         if (!$.isEmptyObject(data)) {
-          // Create autocomplete element
           var $autocomplete = $('<ul class="autocomplete-content dropdown-content"></ul>');
+          var $oldAutocomplete;
 
-          // Append autocomplete element
+          // Append autocomplete element.
+          // Prevent double structure init.
           if ($inputDiv.length) {
-            $inputDiv.append($autocomplete); // Set ul in body
+            $oldAutocomplete = $inputDiv.children('.autocomplete-content.dropdown-content').first();
+            if (!$oldAutocomplete.length) {
+              $inputDiv.append($autocomplete); // Set ul in body
+            }
           } else {
-            $input.after($autocomplete);
+            $oldAutocomplete = $input.next('.autocomplete-content.dropdown-content');
+            if (!$oldAutocomplete.length) {
+              $input.after($autocomplete);
+            }
+          }
+          if ($oldAutocomplete.length) {
+            $autocomplete = $oldAutocomplete;
           }
 
+
           var highlight = function(string, $el) {
             var img = $el.find('img');
             var matchStart = $el.text().toLowerCase().indexOf("" + string.toLowerCase() + ""),
@@ -319,8 +332,11 @@
           };
 
           // Perform search
-          $input.on('keyup', function (e) {
-            // Capture Enter
+          $input.off('keyup.autocomplete').on('keyup.autocomplete', function (e) {
+            // Reset count.
+            count = 0;
+
+            // Capture enter.
             if (e.which === 13) {
               $autocomplete.find('li').first().click();
               return;
@@ -335,15 +351,21 @@
                 if (data.hasOwnProperty(key) &&
                     key.toLowerCase().indexOf(val) !== -1 &&
                     key.toLowerCase() !== val) {
+                  // Break if past limit
+                  if (count >= options.limit) {
+                    break;
+                  }
+
                   var autocompleteOption = $('<li></li>');
-                  if(!!data[key]) {
+                  if (!!data[key]) {
                     autocompleteOption.append('<img src="'+ data[key] +'" class="right circle"><span>'+ key +'</span>');
                   } else {
                     autocompleteOption.append('<span>'+ key +'</span>');
                   }
-                  $autocomplete.append(autocompleteOption);
 
+                  $autocomplete.append(autocompleteOption);
                   highlight(val, autocompleteOption);
+                  count++;
                 }
               }
             }

tests/spec/autocomplete/autocompleteFixture.html

@@ -0,0 +1,18 @@
+<div class="row">
+  <div class="col s12">
+    <div class="row">
+      <div class="input-field col s12">
+        <input type="text" id="normal-autocomplete" class="autocomplete">
+        <label for="normal-autocomplete">Autocomplete</label>
+      </div>
+    </div>
+  </div>
+  <div class="col s12">
+    <div class="row">
+      <div class="input-field col s12">
+        <input type="text" id="limited-autocomplete" class="autocomplete">
+        <label for="limited-autocomplete">Autocomplete</label>
+      </div>
+    </div>
+  </div>
+</div>

tests/spec/autocomplete/autocompleteSpec.js

@@ -0,0 +1,70 @@
+describe("Autocomplete Plugin", function () {
+  beforeEach(function() {
+    loadFixtures('autocomplete/autocompleteFixture.html');
+    $('input.autocomplete').autocomplete({
+      data: {
+        "Apple": null,
+        "Microsoft": null,
+        "Google": 'http://placehold.it/250x250'
+      }
+    });
+  });
+
+  describe("Autocomplete", function () {
+    // var browserSelect, normalInput, normalDropdown;
+
+    // beforeEach(function() {
+    //   browserSelect = $('select.normal');
+    // });
+
+    it("should work with multiple initializations", function () {
+      var $normal = $('#normal-autocomplete');
+      var $parent = $normal.parent();
+      $normal.autocomplete({ data: {"hi": null} });
+      $normal.autocomplete({ data: {"hi": null} });
+      $normal.autocomplete({ data: {"hi": null} });
+      $normal.autocomplete({
+        data: {
+          "Apple": null,
+          "Microsoft": null,
+          "Google": 'http://placehold.it/250x250'
+        }
+      });
+
+      var $autocompleteEl = $parent.find('.autocomplete-content');
+      var autocompleteEvents = $._data($normal[0], 'events');
+
+      expect($autocompleteEl.length).toEqual(1, 'Should dynamically generate autocomplete structure.');
+      expect(autocompleteEvents.keyup.length).toEqual(1, 'Should only bind 1 keyup handler on input');
+      // setTimeout(function() {
+      //   done();
+      // }, 400);
+    });
+
+    it("should limit results if option is set", function (done) {
+      var $limited = $('#limited-autocomplete');
+      var $autocompleteEl = $limited.parent().find('.autocomplete-content');
+      var data = {};
+      for (var i = 1000; i >= 0; i--) {
+        var randString = 'a' + Math.random().toString(36).substring(20);
+        data[randString] = null;
+      }
+
+      $limited.autocomplete({
+        data: data,
+        limit: 20
+      });
+
+      $limited.focus();
+      $limited.val('a');
+      $limited.trigger('keyup');
+
+      setTimeout(function() {
+        expect($autocompleteEl.children().length).toEqual(20, 'Results should be at max the set limit');
+        done();
+      }, 100);
+
+    });
+  });
+
+});