Add option changing TAB-key behaviour: Focus on the next tabindex, instead of selecting the top-suggestion

dist/bloodhound.js

@@ -1,7 +1,7 @@
 /*!
  * typeahead.js 0.11.1
  * https://github.com/twitter/typeahead.js
- * Copyright 2013-2015 Twitter, Inc. and other contributors; Licensed MIT
+ * Copyright 2013-2016 Twitter, Inc. and other contributors; Licensed MIT
  */
 
 (function(root, factory) {

dist/typeahead.bundle.js

@@ -1,7 +1,7 @@
 /*!
  * typeahead.js 0.11.1
  * https://github.com/twitter/typeahead.js
- * Copyright 2013-2015 Twitter, Inc. and other contributors; Licensed MIT
+ * Copyright 2013-2016 Twitter, Inc. and other contributors; Licensed MIT
  */
 
 (function(root, factory) {
@@ -1730,8 +1730,9 @@
                     suggestions = suggestions || [];
                     if (!canceled && rendered < that.limit) {
                         that.cancel = $.noop;
-                        that._append(query, suggestions.slice(0, that.limit - rendered));
-                        rendered += suggestions.length;
+                        var idx = Math.abs(rendered - that.limit);
+                        rendered += idx;
+                        that._append(query, suggestions.slice(0, idx));
                         that.async && that.trigger("asyncReceived", query);
                     }
                 }
@@ -1979,6 +1980,7 @@
             this.input = o.input;
             this.menu = o.menu;
             this.enabled = true;
+            this.tabAutocomplete = o.tabAutocomplete !== false;
             this.active = false;
             this.input.hasFocus() && this.activate();
             this.dir = this.input.getLangDir();
@@ -2056,7 +2058,7 @@
                 var $selectable;
                 if ($selectable = this.menu.getActiveSelectable()) {
                     this.select($selectable) && $e.preventDefault();
-                } else if ($selectable = this.menu.getTopSelectable()) {
+                } else if (this.tabAutocomplete && ($selectable = this.menu.getTopSelectable())) {
                     this.autocomplete($selectable) && $e.preventDefault();
                 }
             },
@@ -2284,7 +2286,8 @@
                         input: input,
                         menu: menu,
                         eventBus: eventBus,
-                        minLength: o.minLength
+                        minLength: o.minLength,
+                        tabAutocomplete: o.tabAutocomplete !== false
                     }, www);
                     $input.data(keys.www, www);
                     $input.data(keys.typeahead, typeahead);

dist/typeahead.jquery.js

@@ -1,7 +1,7 @@
 /*!
  * typeahead.js 0.11.1
  * https://github.com/twitter/typeahead.js
- * Copyright 2013-2015 Twitter, Inc. and other contributors; Licensed MIT
+ * Copyright 2013-2016 Twitter, Inc. and other contributors; Licensed MIT
  */
 
 (function(root, factory) {
@@ -807,8 +807,9 @@
                     suggestions = suggestions || [];
                     if (!canceled && rendered < that.limit) {
                         that.cancel = $.noop;
-                        that._append(query, suggestions.slice(0, that.limit - rendered));
-                        rendered += suggestions.length;
+                        var idx = Math.abs(rendered - that.limit);
+                        rendered += idx;
+                        that._append(query, suggestions.slice(0, idx));
                         that.async && that.trigger("asyncReceived", query);
                     }
                 }
@@ -1056,6 +1057,7 @@
             this.input = o.input;
             this.menu = o.menu;
             this.enabled = true;
+            this.tabAutocomplete = o.tabAutocomplete !== false;
             this.active = false;
             this.input.hasFocus() && this.activate();
             this.dir = this.input.getLangDir();
@@ -1133,7 +1135,7 @@
                 var $selectable;
                 if ($selectable = this.menu.getActiveSelectable()) {
                     this.select($selectable) && $e.preventDefault();
-                } else if ($selectable = this.menu.getTopSelectable()) {
+                } else if (this.tabAutocomplete && ($selectable = this.menu.getTopSelectable())) {
                     this.autocomplete($selectable) && $e.preventDefault();
                 }
             },
@@ -1361,7 +1363,8 @@
                         input: input,
                         menu: menu,
                         eventBus: eventBus,
-                        minLength: o.minLength
+                        minLength: o.minLength,
+                        tabAutocomplete: o.tabAutocomplete !== false
                     }, www);
                     $input.data(keys.www, www);
                     $input.data(keys.typeahead, typeahead);

doc/jquery_typeahead.md

@@ -119,6 +119,12 @@ When initializing a typeahead, there are a number of options you can configure.
 
 * `minLength` – The minimum character length needed before suggestions start 
   getting rendered. Defaults to `1`.
+
+* `tabAutocomplete` - Optional, defaults to `true`. 
+    Pressing the TAB-key within the input-field selects the top most entry
+    from the suggestion list. If you set this option to false, tab does what tab
+    usually is expected to do: change the focus on the html-element with the 
+    next tabindex
 
 * `classNames` – For overriding the default class names used. See 
   [Class Names](#class-names) for more details.

src/typeahead/plugin.js

@@ -79,7 +79,8 @@
           input: input,
           menu: menu,
           eventBus: eventBus,
-          minLength: o.minLength
+          minLength: o.minLength,
+          tabAutocomplete: o.tabAutocomplete !== false
         }, www);
 
         $input.data(keys.www, www);

src/typeahead/typeahead.js

@@ -38,6 +38,8 @@ var Typeahead = (function() {
     this.menu = o.menu;
 
     this.enabled = true;
+
+    this.tabAutocomplete = o.tabAutocomplete !== false;
 
     // activate the typeahead on init if the input has focus
     this.active = false;
@@ -173,7 +175,7 @@ var Typeahead = (function() {
         this.select($selectable) && $e.preventDefault();
       }
 
-      else if ($selectable = this.menu.getTopSelectable()) {
+      else if (this.tabAutocomplete && ($selectable = this.menu.getTopSelectable())) {
         this.autocomplete($selectable) && $e.preventDefault();
       }
     },

test/typeahead/typeahead_spec.js

@@ -452,7 +452,7 @@ describe('Typeahead', function() {
         expect(this.view.select).not.toHaveBeenCalledWith($el);
       });
 
-      it('should not prevent default if no active selectale', function() {
+      it('should not prevent default if no active selectable', function() {
         var $el;
 
         $el = $('<bah>');
@@ -475,7 +475,7 @@ describe('Typeahead', function() {
         expect(payload.preventDefault).not.toHaveBeenCalled();
       });
 
-      it('should autocomplete to top suggestion', function() {
+      it('should autocomplete to top suggestion on default (option tabAutocomplete not set)', function() {    
         var $el;
 
         $el = $('<foo>');
@@ -486,6 +486,32 @@ describe('Typeahead', function() {
 
         expect(this.view.autocomplete).toHaveBeenCalledWith($el);
       });
+
+      it('should autocomplete to top suggestion if option tabAutocomplete is true)', function() {
+    	  this.view.tabAutocomplete = true;
+          var $el;
+
+          $el = $('<foo>');
+          spyOn(this.view, 'autocomplete');
+          this.menu.getTopSelectable.andReturn($el);
+
+          this.input.trigger(eventName, payload);
+
+          expect(this.view.autocomplete).toHaveBeenCalledWith($el);
+        });
+
+      it('should not autocomplete to top suggestion if option tabAutocomplete is false', function() {    	  
+    	  this.view.tabAutocomplete = false;
+          var $el;
+
+          $el = $('<foo>');
+          spyOn(this.view, 'autocomplete');
+          this.menu.getTopSelectable.andReturn($el);
+
+          this.input.trigger(eventName, payload);
+
+          expect(this.view.autocomplete).not.toHaveBeenCalledWith($el);
+        });
 
       it('should prevent default behavior of DOM event if autocompletion succeeds', function() {
         var $el;