Support selecting an entry on Tab
parent
69e33666ce
commit
05aded1a82
15
hinter.js
15
hinter.js
|
@ -2,8 +2,8 @@
|
||||||
|
|
||||||
Homepage: http://yourcmc.ru/wiki/SimpleAutocomplete
|
Homepage: http://yourcmc.ru/wiki/SimpleAutocomplete
|
||||||
License: MPL 2.0+ (http://www.mozilla.org/MPL/2.0/)
|
License: MPL 2.0+ (http://www.mozilla.org/MPL/2.0/)
|
||||||
Version: 2015-09-06
|
Version: 2018-06-01
|
||||||
(c) Vitaliy Filippov 2011-2015
|
(c) Vitaliy Filippov 2011-2018
|
||||||
|
|
||||||
Usage:
|
Usage:
|
||||||
Include hinter.css, hinter.js on your page. Then write:
|
Include hinter.css, hinter.js on your page. Then write:
|
||||||
|
@ -69,6 +69,8 @@
|
||||||
persist
|
persist
|
||||||
If true, the hint layer will never be hidden. You can use it to create
|
If true, the hint layer will never be hidden. You can use it to create
|
||||||
multiselect-like controls (see example at the homepage).
|
multiselect-like controls (see example at the homepage).
|
||||||
|
useTab
|
||||||
|
Select entry on Tab key press
|
||||||
className
|
className
|
||||||
CSS class name for the hint layer. Default is 'hintLayer'.
|
CSS class name for the hint layer. Default is 'hintLayer'.
|
||||||
|
|
||||||
|
@ -98,6 +100,7 @@ var SimpleAutocomplete = function(input, dataLoader, params)
|
||||||
this.moreMarker = params.moreMarker;
|
this.moreMarker = params.moreMarker;
|
||||||
this.idField = params.idField;
|
this.idField = params.idField;
|
||||||
this.persist = params.persist;
|
this.persist = params.persist;
|
||||||
|
this.useTab = params.useTab && true;
|
||||||
this.className = params.className || 'hintLayer';
|
this.className = params.className || 'hintLayer';
|
||||||
if (this.idField && typeof(this.idField) == 'string')
|
if (this.idField && typeof(this.idField) == 'string')
|
||||||
this.idField = document.getElementById(this.idField);
|
this.idField = document.getElementById(this.idField);
|
||||||
|
@ -485,13 +488,13 @@ SimpleAutocomplete.prototype.onChange = function(force)
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Handle Enter key presses, cancel handling of arrow keys
|
// Handle Enter/Tab key presses, cancel handling of arrow keys
|
||||||
SimpleAutocomplete.prototype.onKeyUp = function(ev)
|
SimpleAutocomplete.prototype.onKeyUp = function(ev)
|
||||||
{
|
{
|
||||||
ev = ev||window.event;
|
ev = ev||window.event;
|
||||||
if (ev.keyCode == 38 || ev.keyCode == 40)
|
if (ev.keyCode == 38 || ev.keyCode == 40)
|
||||||
this.show();
|
this.show();
|
||||||
if (ev.keyCode == 38 || ev.keyCode == 40 || ev.keyCode == 10 || ev.keyCode == 13)
|
if (ev.keyCode == 38 || ev.keyCode == 40 || ev.keyCode == 10 || ev.keyCode == 13 || ev.keyCode == 9 && this.useTab)
|
||||||
{
|
{
|
||||||
if (this.hintLayer.style.display == '')
|
if (this.hintLayer.style.display == '')
|
||||||
return stopEvent(ev, true, true);
|
return stopEvent(ev, true, true);
|
||||||
|
@ -502,7 +505,7 @@ SimpleAutocomplete.prototype.onKeyUp = function(ev)
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Handle arrow keys and Enter
|
// Handle arrow keys and Enter/Tab
|
||||||
SimpleAutocomplete.prototype.onKeyDown = function(ev)
|
SimpleAutocomplete.prototype.onKeyDown = function(ev)
|
||||||
{
|
{
|
||||||
if (this.hintLayer.style.display == 'none')
|
if (this.hintLayer.style.display == 'none')
|
||||||
|
@ -512,7 +515,7 @@ SimpleAutocomplete.prototype.onKeyDown = function(ev)
|
||||||
this.moveHighlight(-1);
|
this.moveHighlight(-1);
|
||||||
else if (ev.keyCode == 40) // down
|
else if (ev.keyCode == 40) // down
|
||||||
this.moveHighlight(1);
|
this.moveHighlight(1);
|
||||||
else if (ev.keyCode == 10 || ev.keyCode == 13) // enter
|
else if (ev.keyCode == 10 || ev.keyCode == 13 || ev.keyCode == 9 && this.useTab) // enter / tab
|
||||||
{
|
{
|
||||||
if (this.selectedIndex >= 0)
|
if (this.selectedIndex >= 0)
|
||||||
this.selectItem(this.selectedIndex);
|
this.selectItem(this.selectedIndex);
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue