Browse Source

Support selecting an entry on Tab

master
Vitaliy Filippov 3 years ago
parent
commit
05aded1a82
  1. 15
      hinter.js
  2. 2
      hinter.min.js

15
hinter.js

@ -2,8 +2,8 @@
Homepage: http://yourcmc.ru/wiki/SimpleAutocomplete
License: MPL 2.0+ (http://www.mozilla.org/MPL/2.0/)
Version: 2015-09-06
(c) Vitaliy Filippov 2011-2015
Version: 2018-06-01
(c) Vitaliy Filippov 2011-2018
Usage:
Include hinter.css, hinter.js on your page. Then write:
@ -69,6 +69,8 @@
persist
If true, the hint layer will never be hidden. You can use it to create
multiselect-like controls (see example at the homepage).
useTab
Select entry on Tab key press
className
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.idField = params.idField;
this.persist = params.persist;
this.useTab = params.useTab && true;
this.className = params.className || 'hintLayer';
if (this.idField && typeof(this.idField) == 'string')
this.idField = document.getElementById(this.idField);
@ -485,13 +488,13 @@ SimpleAutocomplete.prototype.onChange = function(force)
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)
{
ev = ev||window.event;
if (ev.keyCode == 38 || ev.keyCode == 40)
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 == '')
return stopEvent(ev, true, true);
@ -502,7 +505,7 @@ SimpleAutocomplete.prototype.onKeyUp = function(ev)
return true;
};
// Handle arrow keys and Enter
// Handle arrow keys and Enter/Tab
SimpleAutocomplete.prototype.onKeyDown = function(ev)
{
if (this.hintLayer.style.display == 'none')
@ -512,7 +515,7 @@ SimpleAutocomplete.prototype.onKeyDown = function(ev)
this.moveHighlight(-1);
else if (ev.keyCode == 40) // down
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)
this.selectItem(this.selectedIndex);

2
hinter.min.js
File diff suppressed because it is too large
View File

Loading…
Cancel
Save