diff --git a/hinter.js b/hinter.js index 1956ad0..efa2211 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: 2013-11-13 - (c) Vitaliy Filippov 2011-2013 + Version: 2014-09-04 + (c) Vitaliy Filippov 2011-2014 Usage: Include hinter.css, hinter.js on your page. Then write: @@ -61,6 +61,11 @@ of the list, and SimpleAutocomplete will issue another request to dataLoader with incremented 'more' parameter when it will be clicked. You can also set moreMarker to false to disable this feature. + persist + If true, the hint layer will never be hidden. You can use it to create + multiselect-like controls (see example at the homepage). + className + CSS class name for the hint layer. Default is 'hintLayer'. Destroy instance: hint.remove(); hint = null; @@ -85,6 +90,8 @@ var SimpleAutocomplete = function(input, dataLoader, params) this.prompt = params.prompt; this.delay = params.delay; this.moreMarker = params.moreMarker; + this.persist = params.persist; + this.className = params.className || 'hintLayer'; // Default values if (this.moreMarker === undefined) @@ -119,13 +126,20 @@ SimpleAutocomplete.prototype.init = function() // Create hint layer var t = this.hintLayer = document.createElement('div'); - t.className = 'hintLayer'; - t.style.display = 'none'; - t.style.position = 'absolute'; - t.style.top = (p.top+e.offsetHeight) + 'px'; - t.style.zIndex = 1000; - t.style.left = p.left + 'px'; - document.body.appendChild(t); + t.className = this.className; + if (!this.persist) + { + t.style.display = 'none'; + t.style.position = 'absolute'; + t.style.top = (p.top+e.offsetHeight) + 'px'; + t.style.zIndex = 1000; + t.style.left = p.left + 'px'; + document.body.appendChild(t); + } + else + { + e.nextSibling ? e.parentNode.insertBefore(t, e.nextSibling) : e.parentNode.appendChild(t); + } // Remember instance e.SimpleAutocomplete_input = this; @@ -146,7 +160,7 @@ SimpleAutocomplete.prototype.init = function() this.addRmListener('focus', function() { return self.onInputFocus(); }); this.addRmListener('blur', function() { return self.onInputBlur(); }); addListener(t, 'mousedown', function(ev) { return self.cancelBubbleOnHint(ev); }); - this.onChange(); + this.onChange(true); }; // items = [ [ name, value ], [ name, value ], ... ] @@ -360,16 +374,19 @@ SimpleAutocomplete.prototype.toggleValue = function(index) // Hide hinter SimpleAutocomplete.prototype.hide = function() { - if (!this.skipHideCounter) - this.hintLayer.style.display = 'none'; - else - this.skipHideCounter = 0; + if (!this.persist) + { + if (!this.skipHideCounter) + this.hintLayer.style.display = 'none'; + else + this.skipHideCounter = 0; + } }; // Show hinter SimpleAutocomplete.prototype.show = function() { - if (!this.disabled) + if (!this.disabled && !this.persist) { var p = getOffset(this.input); this.hintLayer.style.top = (p.top+this.input.offsetHeight) + 'px'; diff --git a/hinter.min.js b/hinter.min.js index cbd1e5f..9460397 100644 --- a/hinter.min.js +++ b/hinter.min.js @@ -1,4 +1,4 @@ // (c) Vitaliy Filippov 2011-2013 // @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.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;if(this.h===undefined){this.h="#MORE"}if(this.g===undefined){this.g=300}this.i=0;this.j=null;this.k=[];this.l=[];this.m=0;this.n=-1;this.o=false;this.p()};SimpleAutocomplete.prototype.p=function(){var f=this.input;var a=SimpleAutocomplete.q;this.r=this.input.id+a.length;a.push(this);var d=getOffset(f);var c=this.s=document.createElement("div");c.className="hintLayer";c.style.display="none";c.style.position="absolute";c.style.top=(d.top+f.offsetHeight)+"px";c.style.zIndex=1000;c.style.left=d.left+"px";document.body.appendChild(c);f.SimpleAutocomplete_input=this;c.SimpleAutocomplete_layer=this;if(typeof f.autocomplete!=="undefined"){f.autocomplete="off";addListener(window,"beforeunload",function(){f.autocomplete="on"})}var b=this;this.t("keydown",function(e){return b.u(e)});this.t("keyup",function(e){return b.v(e)});this.t("change",function(){return b.onChange()});this.t("focus",function(){return b.w()});this.t("blur",function(){return b.x()});addListener(c,"mousedown",function(e){return b.y(e)});this.onChange()};SimpleAutocomplete.prototype.replaceItems=function(c,a){if(!a){this.s.scrollTop=0;this.n=0;this.l=[];if(!c||c.length==0){if(this.e){this.s.innerHTML='
'+this.e+"
"}else{this.z()}return}while(this.n'+this.f+"":"";this.aa()}if(this.b){var e={};var b=this.input.value.split(this.b);for(var d=0;d=0){var d=this.ah();if(d){d.className=this.l[this.n][2]?"hintDisabledItem":"hintItem"}}this.n=a;b.className="hintActiveItem";return false};SimpleAutocomplete.prototype.ah=function(a){if(a==null){a=this.n}if(a<0){return null}return document.getElementById(this.r+"_item_"+this.n)};SimpleAutocomplete.prototype.selectItem=function(a){if(this.l[a][2]){return false}if(this.h&&this.l[a][1]==this.h){this.l.splice(a,1);elm.parentNode.removeChild(elm);this.i++;this.onChange(true);return}if(!this.b&&!this.c){this.input.value=this.l[a][1];this.hide()}else{document.getElementById(this.r+"_check_"+a).checked=this.l[a][3]=!this.l[a][3];if(this.c&&!this.c(this,a,this.l[a])){return}this.ai(a)}this.aj=this.input.value;if(this.d){this.d(this,a)}};SimpleAutocomplete.prototype.ai=function(c){var b=this.input.value.split(this.b);for(var d=0;d=0;d--){if(b[d]==this.l[c][1]){b.splice(d,1)}}this.input.value=b.join(this.b+" ")}else{var e={};for(var d=0;d=0){this.selectItem(this.n)}return stopEvent(e,true,true)}else{if(e.keyCode==27){this.hide();return stopEvent(e,true,true)}else{return true}}}}if(this.n>=0){var f=this.ah();var b=this.s;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.ab()}return}while(this.p'+this.f+"":"";this.ac()}if(this.b){var e={};var b=this.input.value.split(this.b);for(var d=0;d=0){var d=this.aj();if(d){d.className=this.n[this.p][2]?"hintDisabledItem":"hintItem"}}this.p=a;b.className="hintActiveItem";return false};SimpleAutocomplete.prototype.aj=function(a){if(a==null){a=this.p}if(a<0){return null}return document.getElementById(this.t+"_item_"+this.p)};SimpleAutocomplete.prototype.selectItem=function(a){if(this.n[a][2]){return false}if(this.h&&this.n[a][1]==this.h){this.n.splice(a,1);elm.parentNode.removeChild(elm);this.k++;this.onChange(true);return}if(!this.b&&!this.c){this.input.value=this.n[a][1];this.hide()}else{document.getElementById(this.t+"_check_"+a).checked=this.n[a][3]=!this.n[a][3];if(this.c&&!this.c(this,a,this.n[a])){return}this.ak(a)}this.al=this.input.value;if(this.d){this.d(this,a)}};SimpleAutocomplete.prototype.ak=function(c){var b=this.input.value.split(this.b);for(var d=0;d=0;d--){if(b[d]==this.n[c][1]){b.splice(d,1)}}this.input.value=b.join(this.b+" ")}else{var e={};for(var d=0;d=0){this.selectItem(this.p)}return stopEvent(e,true,true)}else{if(e.keyCode==27){this.hide();return stopEvent(e,true,true)}else{return true}}}}if(this.p>=0){var f=this.aj();var b=this.u;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