Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/bloodhound.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions dist/bloodhound.min.js

Large diffs are not rendered by default.

13 changes: 8 additions & 5 deletions dist/typeahead.bundle.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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);
}
}
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
}
},
Expand Down Expand Up @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions dist/typeahead.bundle.min.js

Large diffs are not rendered by default.

13 changes: 8 additions & 5 deletions dist/typeahead.jquery.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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);
}
}
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
}
},
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions dist/typeahead.jquery.min.js

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions doc/jquery_typeahead.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
3 changes: 2 additions & 1 deletion src/typeahead/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 3 additions & 1 deletion src/typeahead/typeahead.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
},
Expand Down
30 changes: 28 additions & 2 deletions test/typeahead/typeahead_spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>');
Expand All @@ -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>');
Expand All @@ -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;
Expand Down