UNPKG

unibox

Version:

A powerful search suggestion input box.

1 lines 11.9 kB
var UniBox=function(){var B=-1;var u;var e;var i;var f="";var p="";var G=-80;var I;var a;var l=[];var P=true;var r;var g;var s=300;var o="";var m=2;var x;var v;var N;var d;var c;var D;var O=[];var t="all";var C=-1;var A="";var b=false;var M=[];var j=[];var w=undefined;var R=undefined;var n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;"};function L(T){T=T||window.event;if(T!==undefined){var U=T.keyCode||T.which;var V=u.val();if(U==27||U==13||U==9||V.length<m){z(T);if(U==13&&x!==undefined&&B==-1){x.call(this,V)}B=-1}}else{z(T);B=-1}}function z(T){if(c!==undefined){c.call(this,T,i.val())}i.removeClass("uniboxActive");i.slideUp(s)}function H(U,T){var V=null;return function(){var X=this,W=arguments;clearTimeout(V);V=window.setTimeout(function(){U.apply(X,W)},T||50)}}function J(U,T){if(!P){return U}var aa=T.replace(/[^a-zA-Z0-9äöüÄÖÜß]|\s+|\r?\n|\r/gmi," ").replace(/[^a-zA-Z0-9äöüÄÖÜß]/g," ").split(" ");aa.sort(function(ac,ab){return ab.length-ac.length});var Z={};jQuery.each(aa,function(ab,ag){if(ag.length<1){return}var af=U.match(new RegExp("(("+ag+")(?!#<##|-\\d+#<##))(?!.*\\1)","gi"));if(af!=null){for(var ae=0;ae<af.length;ae++){var ad=af[ae];var ac=ad.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&");U=U.replace(new RegExp("("+ac+")(?!#<##|-\\d+#<##)","g"),"##>#"+ab+"-"+ae+"#<##");Z["##>#"+ab+"-"+ae+"#<##"]='<span class="unibox-highlight">'+ad+"</span>"}}});var X=Object.keys(Z).reverse();for(var V=0;V<X.length;V++){var Y=X[V];var W=Z[Y];U=U.replace(new RegExp(Y,"gi"),W)}return U}function Q(T){return T.replace(/[ "§$%&/(){}+*,.;|]/g,"_").toLowerCase()}function y(T){return String(T).replace(/[&<>"'\/]/g,function(U){return n[U]})}function S(X){if(C==13){L();return}var T=u.val();var Y=y(T);i.html("");var V=false;var W=Object.keys(X.suggests);if(M&&M.length>0){W=M;jQuery.each(Object.keys(X.suggests),function(Z,aa){if(jQuery.inArray(aa,W)<0){W.push(aa)}})}jQuery.each(W,function(Z,ac){var ab=X.suggests[ac];if(!ab||ab.length==0){return true}var aa=0;jQuery.each(W,function(af,ah){var ag=X.suggests[ah];if(!ag||ac===ah||ag.length==0){return true}aa+=ag.length});var ae=jQuery('<div class="unibox-suggest-cluster unibox-suggest-'+Q(ac)+" "+("unibox-"+ab.length+"-entries")+" "+(aa==0?"unibox-single-suggestion-block":"")+'"></div>');if(ac.replace(/_/,"").length>0&&ab.length>0){var ad=jQuery("<h4>"+ac+"</h4>");ae.append(ad)}jQuery.each(ab,function(ao,am){var aj='<div class="unibox-selectable">';if(am.image!=undefined){var aq=am.image.length===0&&I?I:am.image.length===0||am.image.indexOf("/")===0||am.image.indexOf("http")===0?am.image:p+am.image;aj+='<div class="unibox-selectable-img-container"><img src="'+aq+'"/></div>'}if(am.link!=undefined&&am.link!=""){aj+='<a class="uniboxSearchContent" href="'+am.link+'">';aj+=J(am.name,Y);aj+="</a>"}else{aj+='<span class="uniboxSearchContent">'+J(am.name,Y)+"</span>"}if(r!=undefined){var an=r.match(/##(.*?)##/gi);var ai=r;var ah=false;for(var ak=0;ak<an.length;ak++){var al=an[ak];if(al===undefined||al.length==0){continue}var ag=al.replace(/#/g,"");var af=am[ag];if(af==undefined){ah=true;continue}var ar=new RegExp(al,"g");ai=ai.replace(ar,af)}if(!ah){aj+='<div class="unibox-extra">'+ai+"</div>"}}aj+='<div class="unibox-ca"></div></div>';if(g!==undefined){aj=g.call(this,aj,ac,ao,am)}var ap=jQuery(aj);ae.append(ap);V=true});i.append(ae)});l=e.find(".unibox-selectable");if(j&&j.length>0){l=[];jQuery.each(j,function(Z,aa){l=l.concat(e.find(".unibox-suggest-"+Q(aa)+":first .unibox-selectable").get())});jQuery.each(jQuery.grep(Object.keys(X.suggests),function(Z){if(j.indexOf(Z)<0){return true}}),function(Z,aa){l=l.concat(e.find(".unibox-suggest-"+Q(aa)+":first .unibox-selectable").get())})}B=-1;jQuery(l).mousedown(function(){var aa=jQuery(this).find(".uniboxSearchContent:first").text();u.val(aa);var Z=undefined;try{Z=jQuery(this).find("a:first").attr("href")}catch(ab){}if(v!=undefined){v.call(this,aa,Z)}L()});e.find(".unibox-selectable .unibox-extra").click(function(Z){Z.stopPropagation()});if(X.words.length>0&&o.length>0&&(t=="all"||t=="bottom")){i.append("<h4>"+o+"</h4>");V=true}var U=[];jQuery.each(X.words,function(aa,ad){if((t=="all"||t=="bottom")){if(ad.overlayImage!=undefined){i.append('<img class="unibox-vis" src="'+p+ad.overlayImage+'" style="background-image: url(\''+p+ad.image+"');background-size: 75%;background-repeat: no-repeat;background-position: center;\">")}else{if(ad.image!=undefined){i.append('<img class="unibox-vis" src="'+p+ad.image+'">')}}}var ac=e.find("#unibox-invisible");ac.html(Y.replace(new RegExp(ad.name,"gi"),"<span>"+ad.name+"</span>"));if((t=="all"||t=="top")&&jQuery.inArray(ad.image,O)==-1){var ab=e.find("#unibox-invisible span")[0];if(ab!=undefined&&ad.name.length>0&&ad.image!=undefined){var Z=jQuery(ab).position().left;visImage=jQuery('<div class="unibox-ivf"><img src="'+p+ad.image+'" alt="'+ad.name+'"></div>');visImage.css("left",k().left+Z-10);visImage.css("top",k().top-u.outerHeight()+G);e.append(visImage);setTimeout(function(){e.find(".unibox-ivf").find("img").addClass("l")},10);U.push(ad.image)}}else{if(jQuery.inArray(ad.image,O)>-1){U.push(ad.image)}}});O=U;jQuery("img").error(function(){if(I){jQuery(this).attr("src",I)}else{jQuery(this).hide()}});h();if(R!=undefined&&!V){V=true;i.append(R)}if(V){if(i.is(":visible")){i.addClass("uniboxActive");i.css("left",k().left);i.css("top",k().top)}else{i.slideDown(s,function(){i.addClass("uniboxActive");i.css("left",k().left);i.css("top",k().top)})}}else{L()}}function k(){return{left:u.offset().left-e.offset().left,top:u.offset().top-e.offset().top+u.outerHeight()}}function F(){var U=e.find(".unibox-ivf img").map(function(){return jQuery(this).attr("src")}).get();for(var T=0;T<U.length;T++){if(jQuery.inArray(U[T].replace(p,""),O)==-1){e.find('.unibox-ivf:has(img[src*="'+U[T]+'"])').remove()}}}function q(){O=[];e.find(".unibox-ivf").remove()}function K(T){if(u.val().length<=1){q()}if(N!=undefined){N.call(this,T,u.val())}if(T.keyCode!=37&&T.keyCode!=38&&T.keyCode!=39&&T.keyCode!=40&&T.keyCode!=13){F();return}if(T.keyCode==38&&B>0){B--}else{if(T.keyCode==40){B++}else{if(T.keyCode==38&&B<=0){B=((B!=-1)?B-1:B)+l.length}else{if((T.keyCode==37||T.keyCode==39)&&B>-1){B=B%l.length;var X=jQuery(l[B]);var aa=X.closest(".unibox-suggest-cluster");var V;if(T.keyCode==37){V=aa.prev()}else{if(T.keyCode==39){V=aa.next()}}if(V.hasClass("unibox-suggest-cluster")){var ab=V.find("div.unibox-selectable")[0];B=jQuery("#unibox-suggest-box div.unibox-selectable").index(ab)}}}}}if(l.length>0&&B>-1){B=B%l.length;jQuery(l).removeClass("active");var Y=jQuery(l[B]);Y.addClass("active")}if(T.keyCode==13){T.preventDefault();T.stopPropagation();if(v!=undefined){var W=u.val();var U=undefined;if(B!=-1){W=e.find(".unibox-selectable.active .uniboxSearchContent:first").text();u.val(W);try{U=jQuery(e.find(".unibox-selectable.active")[0]).find("a").attr("href")}catch(Z){}if(v!=undefined){v.call(this,W,U)}}}else{if(B!=-1){window.location.href=jQuery(e.find(".unibox-selectable.active")[0]).find("a").attr("href")}}return false}if(B>-1){T.preventDefault()}}function E(T){if(C==18){C=T.keyCode;return}C=T.keyCode;if(((T.keyCode==37||T.keyCode==39)&&B>-1)||T.keyCode==38||T.keyCode==40||T.keyCode==13||T.keyCode==9){return}var U=u.val();if(C==46&&U.length==0){q()}if(U.length>=m){A=U;jQuery.ajax({usedQuery:U,url:f+encodeURIComponent(U),dataType:"json",success:function(V){if(this.usedQuery==A){S(V)}}})}}function h(){var U=jQuery("#unibox-suggest-box");var T=U.css("border-width").replace("px","");U.css("min-width",u.outerWidth()-2*T);if(w==undefined){U.css("max-width",u.outerWidth()-2*T)}else{U.css("max-width",w-2*T)}U.css("left",k().left);U.css("top",k().top)}return{updateSuggestUrl:function(T){f=T},hideSuggestBox:function(){L()},setIvfImagePath:function(T){p=T;if(p.charAt(p.length-1)!="/"){p+="/"}},changeInstantVisualFeedbackState:function(T){t=T},render:function(){h()},getText:function(){return u.val()},init:function(ag,ai){u=ag;e=ai.searchBoxContainer;P=ai.highlight;r=ai.extraHtml;g=ai.lineCallback;f=ai.suggestUrl;p=ai.ivfImagePath;G=ai.ivfImageOffset;I=ai.missingErrorImage;a=ai.throttleTime;s=ai.animationSpeed;m=ai.minChars;x=ai.enterCallback;v=ai.enterCallbackResult;N=ai.typeCallback;d=ai.focusCallback;c=ai.blurCallback;D=ai.placeholder;t=ai.instantVisualFeedback;o=ai.queryVisualizationHeadline;b=ai.showDeleteAllButton;M=ai.suggestOrder;j=ai.suggestSelectionOrder;w=ai.maxWidth;R=ai.noSuggests;u.attr("autocomplete","off");i=jQuery('<div id="unibox-suggest-box"></div>');e.prepend(i);var ae=e.css("position");if(ae!="absolute"){e.css("position","relative")}var Z=i.css("border-width").replace("px","");i.css("min-width",u.outerWidth()-2*Z);i.css("max-width",ai.maxWidth-2*Z);u.keydown(K);u.keydown(H(E,a));u.keyup(L);u.focus(function(aj){aj=aj||window.event;aj.stopPropagation();if(jQuery(this).val().length>0){E({keyCode:-1})}if(d!==undefined){d.call(this,aj,jQuery(this).val())}});i.mouseenter(function(){i.find(".unibox-selectable.active").removeClass("active")});jQuery("html").click(function(aj){if(i.hasClass("uniboxActive")){z(aj)}});u.keydown(function(ak){ak=ak||window.event;var aj=ak.keyCode||ak.which;if(aj==9){z(ak)}});u.focusout(function(aj){aj=aj||window.event;setTimeout(function(){if(jQuery(document.activeElement).parents("#unibox-suggest-box").length===0){z(aj)}},10)});u.click(function(aj){aj.stopPropagation()});i.click(function(aj){aj.stopPropagation()});var U=u.attr("placeholder");D=U&&U.length>0?U:D;if(D&&D.length>0){var ab=document.createElement("input");if(!("placeholder" in ab)){u.focus(function(){var aj=jQuery(this).attr("placeholder");if((aj)&&(aj.length>0)&&(aj!="")&&jQuery(this).val()==aj){jQuery(this).val("").removeClass("hasPlaceholder")}}).blur(function(){var aj=jQuery(this).attr("placeholder");if((aj)&&(aj.length>0)&&(aj!="")&&(jQuery(this).val()==""||jQuery(this).val()==aj)){jQuery(this).val(aj).addClass("hasPlaceholder")}});u.val(D)}u.attr("placeholder",D)}var ah=jQuery('<div id="unibox-invisible">&nbsp;<span>&nbsp;</span></div>');e.append(ah);if(b){var af=jQuery('<div id="unibox-dab-holder"><div id="unibox-dab"></div></div>');e.append(af);jQuery(af).mousedown(function(aj){(aj||window.event).stopPropagation();u.val("");u.focus();return false});u.focus(function(){if(u.val().length>0){af.show()}else{af.hide()}}).blur(function(){af.hide()}).keydown(function(){if(jQuery(this).val().length>0){jQuery(af).show()}});var ad=parseInt(u.css("paddingTop").replace("px","").trim());var ac=u.outerHeight();var aa=parseInt(u.css("borderTopWidth").replace("px","").trim());var X=u.css("boxShadow").match(/\d{1,3}px/g);var W=(X&&X.length>2)?parseInt(X[2].replace("px","").trim()):0;af.height(ac-(2*aa)-W-ad);var T=parseInt(u.css("paddingRight").replace("px","").trim());T=(T>25)?T:25;u.css("paddingRight",T);var Y=aa+W+(u.offset().top-u.parent().offset().top-u.parent().scrollTop());var V=Math.abs(u[0].getBoundingClientRect().left-u.parent()[0].getBoundingClientRect().left)+u.outerWidth()-af.outerWidth()-aa-T;af.css("top",Y);af.css("left",V)}if(t=="none"){jQuery("#unibox-invisible").css("display","none")}}}};(function(a){a.fn.unibox=function(b){var c=this.map(function(e,h){h=a(h);var f=a.extend({suggestUrl:"",ivfImagePath:"",ivfImageOffset:-80,missingErrorImage:undefined,queryVisualizationHeadline:"",highlight:true,throttleTime:50,animationSpeed:300,instantVisualFeedback:"all",enterCallback:undefined,enterCallbackResult:undefined,typeCallback:undefined,focusCallback:undefined,blurCallback:undefined,placeholder:undefined,extraHtml:undefined,lineCallback:undefined,noSuggests:undefined,minChars:3,maxWidth:h.outerWidth(),showDeleteAllButton:false,suggestOrder:[],suggestSelectionOrder:[]},b);if(f.searchBoxContainerSelector==undefined){f.searchBoxContainer=h.parent()}else{f.searchBoxContainer=a(f.searchBoxContainerSelector)}var g=new UniBox();g.init(h,f);return g});var d=a.makeArray(c);if(d.length==1){return d[0]}return d}}(jQuery));