paramquery-select/pqselect.min.js

jQuery plugin to select multiple or single options with checkboxes, radio buttons, with support for search, grouping, disabled options and jQueryUI themeRoller ready.

/*!
 * ParamQuery Select v1.2.0
 *
 * Copyright (c) 2015 Paramvir Dhindsa (http://paramquery.com)
 * Released under GNU General Public License v3
 * http://paramquery.com/license
 *
 */
!function(a){"use strict";a.support.touch="ontouchend"in document;var b={};b.options=function(){var b=a.ui.keyCode;return{radio:!1,singlePlaceholder:"Select an option",checkbox:!1,displayText:"{0} of {1} selected",maxDisplay:4,maxSelect:0,multiplePlaceholder:"Select options",selectallText:"Select All",position:{my:"left top",at:"left bottom",collision:"flipfit"},kcOpen:[b.DOWN,b.ENTER,b.UP],deselect:!0,hoverCls:"pq-state-hover",search:!0,searchRule:"contain",selectCls:"ui-state-highlight pq-state-select",width:null,maxSelectReach:null,maxSelectExceed:null}}(),b._setButtonWidth=function(){var a=this.element;a.show();var b=this.options,c=b.width?b.width:a[0].offsetWidth;a.hide(),this.$button.width(c)},b._create=function(){var b=this,c=this.options,d=this.element,e=d.attr("name"),f=d.attr("multiple"),g=a(["<div class='pq-select-button pq-no-capture ui-widget ui-state-default ui-corner-all' "," data-name='",e,"' tabindex='0'>",f?"":"<span class='ui-icon ui-icon-triangle-1-s'></span>","<div class='pq-select-text'></div>","</div>"].join(""));this.$button=g,this.multiple=f?!0:!1,this.selector="label.pq-select-option-label.ui-state-enable:visible",this._setButtonWidth(),d.after(g),g.attr("name",e),g.addClass(d.attr("class")),d.addClass("pq-select"),this._extractData(),this._createPopup(),this._createMenu(),g.on({click:function(){if(!c.disabled){var d=a(this).parent(".pq-select-item"),e=parseInt(d.attr("data-id"));return b.select(e,!1),b.setText(),b.focus(),b.triggerChange(),!1}}},".ui-icon-close"),g.on({click:function(){return c.disabled?void 0:(b.toggle(),!1)},focus:function(){c.disabled||a(this).addClass("ui-state-hover")},blur:function(){a(this).removeClass("ui-state-hover")},mousedown:function(){c.disabled||a(this).addClass("ui-state-active")},mouseup:function(){c.disabled||a(this).removeClass("ui-state-active")},keydown:function(d){if(!c.disabled){var e=d.keyCode,f=c.kcOpen,g=a.ui.keyCode;-1!==a.inArray(e,f)?b.open():e===g.ESCAPE?b.close():e===g.SPACE&&b.toggle()}}}),this.setText();var h=this.eventNamespace;a(window).on("resize"+h+" scroll"+h,function(a){b.onWindowResize(a)})},b.onWindowResize=function(){this.close()},b.focus=function(){var b=this;a.support.touch||b.$search.focus()},a.paramquery=a.paramquery||{},a.paramquery.scrollView=function(b){var c=b[0],d=c.offsetTop,e=c.offsetHeight,f=c.offsetParent,g=f.scrollTop,h=f.clientHeight;e+d>h+g?a(f).scrollTop(e+d-h):g>d&&a(f).scrollTop(d)},a.paramquery.pageMove=function(b,c,d){var e,f=b[0].offsetHeight,g=b[0].offsetParent,h=g.clientHeight;do{if(e=b[d?"nextAll":"prevAll"](c),!e.length)break;e=a(e[0]),f+=e[0].offsetHeight,b=e}while(h>f);return a.paramquery.scrollView(b),b},b._move=function(b){var c=this.$lastlabelHighlight;if(c&&c.length){var d=c[b?"nextAll":"prevAll"](this.selector);d.length&&(d=a(d[0]),this._highlight(d))}else this._hightlight()},b._onkeydown=function(b){var c=b.keyCode,d=a.ui.keyCode;if(c===d.DOWN||c===d.UP)return this._move(c===d.DOWN),!1;if(c===d.PAGE_DOWN||c===d.PAGE_UP){var e=a.paramquery.pageMove(this.$lastlabelHighlight,this.selector,c===d.PAGE_DOWN);return this._highlight(e),!1}if(c===d.TAB)return this.close(),!1;if(c===d.ESCAPE)this.close();else if(c===d.ENTER&&this.$lastlabelHighlight)return this.$lastlabelHighlight.trigger("label_changed"),!1},b.search=function(a){for(var b=this.data,c=this.options.searchRule,d="contain"===c,e=0,f=b.length;f>e;e++){var g=b[e],h=g.text.toUpperCase(),i=h.indexOf(a);g.searchIndx=null,-1===i?g.hidden=!0:d===!1&&i>0?g.hidden=!0:(g.hidden=!1,g.searchIndx=i)}},b._onkeyupsearch=function(b){var c=a(b.target),d=a.trim(c.val()).toUpperCase(),e=(this.data,b.keyCode),f=a.ui.keyCode,g=[f.DOWN,f.UP,f.ENTER,f.PAGE_DOWN,f.PAGE_UP];-1===a.inArray(e,g)&&(this.search(d),this._createMenu(),this.positionPopup())},b._onChange=function(a,b){var c=this,d=c.options,e=this.multiple,f=d.maxSelect,g=c.selectIndx;if(e){if(b&&f&&g.length>=f)return c._trigger("maxSelectExceed",null,{option:c.$options[a]}),c.focus(),!1}else if(g.length){var h=g[0];if(a===h)return!1;b&&this.select(h,!1)}this.select(a,b),c.setText(),c.setSelectAllState(),e?f&&g.length>=f?c._trigger("maxSelectReach",null,{option:c.$options[a]})!==!1&&c.close():c.focus():c.close(),this.triggerChange()},b.setSelectAllState=function(){var a=this.$popup.find(".pq-select-all input");if(a.length){for(var b=this.data,c=0,d=0,e=0,f=b.length;f>e;e++){var g=b[e],h=g.selected,i=g.disabled;i||(c++,h&&d++)}c===d?a.prop("checked",!0):a.prop("checked",!1)}},b.getInstance=function(){return{select:this}},b.select=function(b,c){var d=this,e=d.selectIndx,f=this.options,g=this.data[b],h=a(d.$options[b]),i=d.$popup.find("#pq-option-"+this.uuid+"-"+b),j=i.find("input");if(i[c?"addClass":"removeClass"](f.selectCls),j.prop("checked",c),g.selected=c,d.multiple){if(c)e.push(b);else{var k=a.inArray(b,e);e.splice(k,1)}h.prop("selected",c)}else c?(e.length&&(this.data[e[0]].selected=!1),e[0]=b,h.prop("selected",c)):(d.selectIndx=[0],this.data[0].selected=!0,a(d.$options[0]).prop("selected",!0))},b.triggerChange=function(){this.element.trigger("change")},b._extractData=function(){var b,c=this.data=[],d=this.element,e=d.find("option,optgroup"),f=!1,g=!1;this.$options=d.find("option");for(var h=0,i=e.length;i>h;h++){var j=e[h],k=a(j);if("optgroup"!=j.nodeName.toLowerCase()){var l=k.prop("selected"),m=k.prop("disabled");!m&&f&&(m=g);var n=k.text();c.push({selected:l,disabled:m,text:n,optgroup:b})}else b=k.attr("label"),f=!0,g=k.prop("disabled")}this.grouping=f},b.refresh=function(){this.search(""),this._setButtonWidth(),this._createPopup(),this._createMenu(),this.setText()},b.refreshData=function(){this._extractData(),this.refresh()},b._createPopup=function(){var b=this,c=(this.data,this.options),d=b.multiple,e="",f="";d&&c.selectallText&&!c.maxSelect&&(f=["<label class='pq-select-all ui-widget-header ui-corner-all'>","<span class='ui-icon ui-icon-close'></span>","<input type='checkbox' >",c.selectallText,"</label>"].join("")),c.search&&(e=["<div class='pq-select-search-div ui-corner-all'>","<span class='ui-icon ui-icon-search' />","<div class='pq-select-search-div1'>","<input type='text' class='pq-select-search-input' autocomplete='off' />","</div>","</div>"].join(""));var g=a(["<div class='pq-select-popup-cont'>","<div class='pq-select-popup ui-widget-content ui-corner-all'>",f,e,"</div><div class='pq-select-shadow-fix'></div></div>"].join(""));g.css({"font-family":this.$button.css("font-family"),"font-size":this.$button.css("font-size")});var h=g.children("div.pq-select-popup");h.on({keydown:function(a){return b._onkeydown(a)}}),h.find(".ui-icon-close").on({click:function(){return b.close(),!1}}),h.on({change:function(){for(var c=(b.element,a(this)),d=c.prop("checked")?!0:!1,e=b.data,f=b.$options,g=0;g<e.length;g++){var h=e[g];h.disabled||h.selected===d||(h.selected=d,a(f[g]).prop("selected",d))}b._createMenu(),b.setText(),b.focus(),b.triggerChange()}},"label.pq-select-all input"),h.on({mouseenter:function(){b._highlight(a(this))},label_changed:function(){var d=a(this),e=d.attr("id");if(e){var f=d.hasClass(c.selectCls)?!1:!0,g=parseInt(e.split("-")[3]);return b._onChange(g,f)}}},"label.pq-select-option-label.ui-state-enable"),d&&c.checkbox||!d&&c.radio?h.on({click:function(){var b=a(this).closest("label");b.trigger("label_changed")}},"label.pq-select-option-label.ui-state-enable input"):h.on({click:function(){a(this).trigger("label_changed")}},"label.pq-select-option-label.ui-state-enable"),this.$popupCont&&this.$popupCont.remove(),this.$popupCont=g,this.$popup=h,this.$search=h.find(".pq-select-search-input").on({keyup:function(a){return b._onkeyupsearch(a)}}),a(document.body).append(g),this.setSelectAllState()},b._createMenu=function(){for(var b,c,d,e,f=this,g=this.data,h=this.uuid,i=this.options,j=i.search?a.trim(this.$search.val()).length:0,k=" "+i.selectCls+" ",l=f.multiple,m=l?i.checkbox?'type="checkbox"':"":i.radio?'type="radio"':"",n=m?"pq-left-input":this.grouping?"pq-left-group":"",o=f.selectIndx=[],p=[],q=0;q<g.length;q++){var r=g[q],c=r.disabled,s=r.selected,t=r.text,u=r.optgroup;if(s&&o.push(q),!r.hidden){e!==u&&(p.push("<div class='pq-select-optgroup'>",u,"</div>"),e=u);var v=s?' checked="checked" ':"",w=s?k:"",x=c?' disabled="disabled" ':"",d=c?"ui-state-disabled":"ui-state-enable",y="";(0!==q||""!==t)&&(j&&(b=r.searchIndx,t=t.substr(0,b)+"<span class='pq-select-search-highlight'>"+t.substr(b,j)+"</span>"+t.substr(b+j,t.length)),p.push("<label class='pq-select-option-label ",w,d,"'",y," id='pq-option-",h,"-",q,"'>",m?"<input "+m+" "+v+x+" >":"","<span class='",n,"'>",t,"</span>","</label>"))}}var z=a(["<div class='pq-select-menu' >",p.join(""),"</div>"].join(""));this.$menu&&this.$menu.remove(),this.$popup.append(z),delete this.$lastlabelHighlight,this.$menu=z,this._highlight()},b._highlight=function(b){var c=this.options.hoverCls;b&&b.length||(b=this.$menu.find("label.pq-select-option-label.ui-state-enable:visible:first")),b.length&&(this.$lastlabelHighlight&&this.$lastlabelHighlight.removeClass(c),b.addClass(c),this.$lastlabelHighlight=b,a.paramquery.scrollView(b))},b._setPopupWidth=function(){var a=this.$button[0].offsetWidth;this.$popupCont.width(a)},b.positionPopup=function(){var b=this.options,c=this.$button,d=a.extend({of:c},b.position),e=this.$popupCont;this._setPopupWidth(),e.position(d)},b.isOpen=function(){return this.$popupCont&&"block"==this.$popupCont.css("display")?!0:!1},b.open=function(){{var b=this,c=this.$popupCont;this.$menu,this.selectIndx}return this.isOpen()?!1:(c.show(),this.positionPopup(),this._highlight(),a(document).on("mousedown"+b.eventNamespace,function(c){var d=a(c.target);d.closest(b.$popup).length||d.closest(b.$button).length||b.close()}),void(this.options.search?b.focus():c.attr("tabindex","-1").focus()))},b.setText=function(){var a,b=this.$button,c=b.find(".pq-select-text"),d=this.element,e=this.options,f=e.deselect,g=this.data,h="pq-select-item ui-corner-all ui-state-default",i=function(a){return f?["<span class='",h,"' data-id = '",a,"'>","<span class='ui-icon ui-icon-close'></span>","<span class='pq-select-item-text'>",g[a].text,"</span>","</span>"].join(""):g[a].text},j=this.selectIndx;if(this.multiple){b.addClass("pq-select-multiple");var k=j.length,l=e.maxDisplay,m=g.length;if(k>0)if(l>=k){for(var n=[],o=0;k>o;o++){var p=j[o];n.push(i(p))}a=n.join(f?"":", ")}else a=e.displayText,a=a.replace("{0}",j.length),a=a.replace("{1}",m);else a=d.attr("data-placeholder"),a||(a=e.multiplePlaceholder)}else{b.addClass("pq-select-single"),c.css("maxWidth",b.width()-16);var p=j[0],a=g[p].text;null!=a&&""!==a?a=i(p):(a=d.attr("data-placeholder"),a||(a=e.singlePlaceholder))}c.html(a),this.multiple||c.find(".pq-select-item-text").css({maxWidth:b.width()-35}),this.positionPopup()},b.close=function(b){this.isOpen()&&(b=b||{},b.focus!==!1&&this.$button.focus(),this.$popupCont.hide()),a(document).off(this.eventNamespace)},b.toggle=function(){this.isOpen()?this.close():this.open()},b.disable=function(){this.option({disabled:!0})},b.enable=function(){this.option({disabled:!1})},b._destroy=function(){this.$popupCont.remove(),this.$button.remove(),this.element.removeClass("pq-select").show();var b=this.eventNamespace;a(document).off(b),a(window).off(b)},b.destroy=function(){this._super();for(var a in this)delete this[a]},b._setOption=function(a,b){"disabled"==a&&(b===!0?(this.close(),this.$button.addClass("ui-state-disabled")):b===!1&&this.$button.removeClass("ui-state-disabled")),this._super(a,b)},a.widget("paramquery.pqSelect",b)}(jQuery);