vitalif-js
/
SimpleAutocomplete
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Support selecting an entry on Tab

master
Vitaliy Filippov 2018-06-01 16:34:34 +03:00
parent 69e33666ce
commit 05aded1a82
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
hinter.js
View File

@ -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);

2
hinter.min.js vendored
View File

File diff suppressed because one or more lines are too long