From 05aded1a827f4ea47462e01ce8d1e1146e4e3acc Mon Sep 17 00:00:00 2001 From: Vitaliy Filippov Date: Fri, 1 Jun 2018 16:34:34 +0300 Subject: [PATCH] Support selecting an entry on Tab --- hinter.js | 15 +++++++++------ hinter.min.js | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/hinter.js b/hinter.js index fd6d6a3..8acc20e 100644 --- a/hinter.js +++ b/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); diff --git a/hinter.min.js b/hinter.min.js index 75f32a7..0a26acd 100644 --- a/hinter.min.js +++ b/hinter.min.js @@ -1,4 +1,4 @@ // (c) Vitaliy Filippov 2011-2015 // @license MPL 2.0 http://www.mozilla.org/MPL/2.0/ // http://yourcmc.ru/wiki/SimpleAutocomplete -var SimpleAutocomplete=function(b,a,c){if(typeof(b)=="string"){b=document.getElementById(b)}if(!c){c={}}this.options=c;this.input=b;this.a=a;this.b=c.multipleDelimiter;this.c=c.multipleListener;this.d=c.onChangeListener;this.e=c.emptyText;this.f=c.prompt;this.g=c.delay;this.h=c.moreMarker;this.i=c.idField;this.j=c.persist;this.k=c.className||"hintLayer";if(this.i&&typeof(this.i)=="string"){this.i=document.getElementById(this.i)}if(this.h===undefined){this.h="#MORE"}if(this.g===undefined){this.g=300}this.l=0;this.m=null;this.n=[];this.o=[];this.p=0;this.q=-1;this.r=false;this.s=null;this.t()};SimpleAutocomplete.prototype.t=function(){var d=this.input;var a=SimpleAutocomplete.u;this.v=this.input.id+a.length;a.push(this);var c=this.w=document.createElement("div");c.className=this.k;if(!this.j){c.style.display="none";c.style.position="absolute";c.style.zIndex=1000;document.body.insertBefore(c,document.body.childNodes[0])}else{d.nextSibling?d.parentNode.insertBefore(c,d.nextSibling):d.parentNode.appendChild(c)}d.SimpleAutocomplete_input=this;c.SimpleAutocomplete_layer=this;if(typeof d.autocomplete!=="undefined"){d.autocomplete="off";addListener(window,"beforeunload",function(){d.autocomplete="on"})}var b=this;this.x("keydown",function(e){return b.y(e)});this.x("keyup",function(e){return b.z(e)});this.x("change",function(){return b.onChange()});this.x("focus",function(){return b.aa()});this.x("blur",function(){return b.ab()});addListener(c,"mousedown",function(e){return b.ac(e)});this.onChange(true)};SimpleAutocomplete.prototype.replaceItems=function(c,a){if(!a){this.w.scrollTop=0;this.q=0;this.o=[];if(!c||c.length==0){if(this.e){this.w.innerHTML='
'+this.e+"
"}else{this.ad()}return}while(this.q'+this.f+"":"";this.ae()}if(this.b){var e={};var b=this.input.value.split(this.b);for(var d=0;d=0){var d=this.al();if(d){d.className=this.o[this.q][2]?"hintDisabledItem":"hintItem"}}this.q=a;b.className="hintActiveItem";return false};SimpleAutocomplete.prototype.al=function(a){if(a==null){a=this.q}if(a<0){return null}return document.getElementById(this.v+"_item_"+this.q)};SimpleAutocomplete.prototype.selectItem=function(a){if(this.o[a][2]){return false}if(this.h&&this.o[a][1]==this.h){this.o.splice(a,1);var b=document.getElementById(this.v+"_item_"+a);b.parentNode.removeChild(b);this.l++;this.onChange(true);return}if(!this.b&&!this.c){this.input.value=this.o[a][1];if(this.i){this.i.value=this.o[a][3]}this.hide()}else{document.getElementById(this.v+"_check_"+a).checked=this.o[a][3]=!this.o[a][3];if(this.c&&!this.c(this,a,this.o[a])){return}this.am(a)}this.s=this.input.value;if(this.d){this.d(this,a,this.o[a])}};SimpleAutocomplete.prototype.am=function(c){var b=this.input.value.split(this.b);for(var d=0;d=0;d--){if(b[d]==this.o[c][1]){b.splice(d,1)}}this.input.value=b.join(this.b+" ")}else{var e={};for(var d=0;da){this.w.style.right=(a-b.left-this.input.offsetWidth)+"px";this.w.style.left=""}return true}};SimpleAutocomplete.prototype.ad=function(){this.r=true;this.hide()};SimpleAutocomplete.prototype.ae=function(){this.r=false;if(this.an){this.show()}};SimpleAutocomplete.prototype.ag=function(a){return stopEvent(a||window.event,false,true)};SimpleAutocomplete.prototype.ac=function(a){a=a||window.event;if(this.an){this.p++}return stopEvent(a,true,false)};SimpleAutocomplete.prototype.ah=function(a){return this.ak(a)};SimpleAutocomplete.prototype.ai=function(b,c){var a=parseInt(c.id.substr(this.v.length+6));this.selectItem(a);return true};SimpleAutocomplete.prototype.onChange=function(c){var b=this.input.value.trim();if(!c){this.l=0}if(b!=this.s||c){if(this.s!==null&&this.i){this.i.value=""}this.s=b;if(!this.g||c){this.a(this,b,this.l)}else{if(!this.m){var a=this;this.m=setTimeout(function(){a.a(a,a.s,a.l);a.m=null},this.g)}}}return true};SimpleAutocomplete.prototype.z=function(a){a=a||window.event;if(a.keyCode==38||a.keyCode==40){this.show()}if(a.keyCode==38||a.keyCode==40||a.keyCode==10||a.keyCode==13){if(this.w.style.display==""){return stopEvent(a,true,true)}else{return true}}this.onChange();return true};SimpleAutocomplete.prototype.y=function(e){if(this.w.style.display=="none"){return true}e=e||window.event;if(e.keyCode==38){this.aj(-1)}else{if(e.keyCode==40){this.aj(1)}else{if(e.keyCode==10||e.keyCode==13){if(this.q>=0){this.selectItem(this.q)}return stopEvent(e,true,true)}else{if(e.keyCode==27){this.hide();return stopEvent(e,true,true)}else{return true}}}}if(this.q>=0){var f=this.al();var b=this.w;var a=getOffset(f).top+b.scrollTop-b.style.top.substr(0,b.style.top.length-2);var d=f.scrollHeight;if(a+d-b.offsetHeight>b.scrollTop){b.scrollTop=a+d-b.offsetHeight}else{if(a'+this.e+""}else{this.ae()}return}while(this.r'+this.f+"":"";this.af()}if(this.b){var e={};var b=this.input.value.split(this.b);for(var d=0;d=0){var d=this.am();if(d){d.className=this.p[this.r][2]?"hintDisabledItem":"hintItem"}}this.r=a;b.className="hintActiveItem";return false};SimpleAutocomplete.prototype.am=function(a){if(a==null){a=this.r}if(a<0){return null}return document.getElementById(this.w+"_item_"+this.r)};SimpleAutocomplete.prototype.selectItem=function(a){if(this.p[a][2]){return false}if(this.h&&this.p[a][1]==this.h){this.p.splice(a,1);var b=document.getElementById(this.w+"_item_"+a);b.parentNode.removeChild(b);this.m++;this.onChange(true);return}if(!this.b&&!this.c){this.input.value=this.p[a][1];if(this.i){this.i.value=this.p[a][3]}this.hide()}else{document.getElementById(this.w+"_check_"+a).checked=this.p[a][3]=!this.p[a][3];if(this.c&&!this.c(this,a,this.p[a])){return}this.an(a)}this.t=this.input.value;if(this.d){this.d(this,a,this.p[a])}};SimpleAutocomplete.prototype.an=function(c){var b=this.input.value.split(this.b);for(var d=0;d=0;d--){if(b[d]==this.p[c][1]){b.splice(d,1)}}this.input.value=b.join(this.b+" ")}else{var e={};for(var d=0;da){this.x.style.right=(a-b.left-this.input.offsetWidth)+"px";this.x.style.left=""}return true}};SimpleAutocomplete.prototype.ae=function(){this.s=true;this.hide()};SimpleAutocomplete.prototype.af=function(){this.s=false;if(this.ao){this.show()}};SimpleAutocomplete.prototype.ah=function(a){return stopEvent(a||window.event,false,true)};SimpleAutocomplete.prototype.ad=function(a){a=a||window.event;if(this.ao){this.q++}return stopEvent(a,true,false)};SimpleAutocomplete.prototype.ai=function(a){return this.al(a)};SimpleAutocomplete.prototype.aj=function(b,c){var a=parseInt(c.id.substr(this.w.length+6));this.selectItem(a);return true};SimpleAutocomplete.prototype.onChange=function(c){var b=this.input.value.trim();if(!c){this.m=0}if(b!=this.t||c){if(this.t!==null&&this.i){this.i.value=""}this.t=b;if(!this.g||c){this.a(this,b,this.m)}else{if(!this.n){var a=this;this.n=setTimeout(function(){a.a(a,a.t,a.m);a.n=null},this.g)}}}return true};SimpleAutocomplete.prototype.aa=function(a){a=a||window.event;if(a.keyCode==38||a.keyCode==40){this.show()}if(a.keyCode==38||a.keyCode==40||a.keyCode==10||a.keyCode==13||a.keyCode==9&&this.k){if(this.x.style.display==""){return stopEvent(a,true,true)}else{return true}}this.onChange();return true};SimpleAutocomplete.prototype.z=function(e){if(this.x.style.display=="none"){return true}e=e||window.event;if(e.keyCode==38){this.ak(-1)}else{if(e.keyCode==40){this.ak(1)}else{if(e.keyCode==10||e.keyCode==13||e.keyCode==9&&this.k){if(this.r>=0){this.selectItem(this.r)}return stopEvent(e,true,true)}else{if(e.keyCode==27){this.hide();return stopEvent(e,true,true)}else{return true}}}}if(this.r>=0){var f=this.am();var b=this.x;var a=getOffset(f).top+b.scrollTop-b.style.top.substr(0,b.style.top.length-2);var d=f.scrollHeight;if(a+d-b.offsetHeight>b.scrollTop){b.scrollTop=a+d-b.offsetHeight}else{if(a