From 4a7544c172fdc26a64d379265eb945fc1a865232 Mon Sep 17 00:00:00 2001 From: shirishwebonise Date: Tue, 27 Nov 2018 21:33:02 +0530 Subject: [PATCH] Option for custom validation messages --- README.md | 6 ++++-- index.html | 4 +++- jquery.dropdown.js | 14 ++++++++++++-- jquery.dropdown.min.js | 3 +-- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 7818d71..6cc334f 100644 --- a/README.md +++ b/README.md @@ -89,8 +89,10 @@ Dropdown 会根据这个JSON来渲染 `select > option` | 名称 | 描述 | 类型|默认| | ----|-----|-----|----| | readOnly|是否只读|Boolean|`false`| -|minCount|下限|Number|`0`| -|limitCount|选择上限|Number|`Infinity`| +| minCount|下限|Number|`0`| +| minCountErrorMessage|下限自定義錯誤消息|String|最低选择个| +| limitCount|选择上限|Number|`Infinity`| +| limitCountErrorMessage|上限的自定义错误消息|String|最多可选择个| | input|搜索框模板|HTML|``| | data|数据源|Array|`[]`| | searchable|是否可开启搜索|Boolean|`true`| diff --git a/index.html b/index.html index 85a0ce7..0af8bb6 100644 --- a/index.html +++ b/index.html @@ -174,7 +174,9 @@

Demo

$('.dropdown-mul-2').dropdown({ minCount: 2, - limitCount: 5, + minCountErrorMessage: 'You need to select at least 2 options!', + limitCount: 4, + limitCountErrorMessage: 'You cannot select more than 4 options!', searchable: false, choice: function () { console.log('.dropdown-mul-2 picked') diff --git a/jquery.dropdown.js b/jquery.dropdown.js index 1af0483..8a78051 100644 --- a/jquery.dropdown.js +++ b/jquery.dropdown.js @@ -52,7 +52,9 @@ var settings = { readonly: false, minCount: 0, + minCountErrorMessage: '', limitCount: Infinity, + limitCountErrorMessage: '', input: '', data: [], searchable: true, @@ -92,10 +94,14 @@ var _config = _dropdown.config; var $el = _dropdown.$el; var $alert = $el.find('.dropdown-minItem-alert'); + var alertMessage = _config.minCountErrorMessage; clearTimeout(_dropdown.itemCountAlertTimer); if ($alert.length === 0) { - $alert = $('
\u6700\u4f4e\u9009\u62e9' + _config.minCount + '\u4E2A
'); + if (!alertMessage) { + alertMessage = '\u6700\u4f4e\u9009\u62e9' + _config.minCount + '\u4E2A'; + } + $alert = $('
' + alertMessage + '
'); } $el.append($alert); @@ -110,10 +116,14 @@ var _config = _dropdown.config; var $el = _dropdown.$el; var $alert = $el.find('.dropdown-maxItem-alert'); + var alertMessage = _config.limitCountErrorMessage; clearTimeout(_dropdown.itemLimitAlertTimer); if ($alert.length === 0) { - $alert = $('
\u6700\u591A\u53EF\u9009\u62E9' + _config.limitCount + '\u4E2A
'); + if (!alertMessage) { + alertMessage = '\u6700\u591A\u53EF\u9009\u62E9' + _config.limitCount + '\u4E2A'; + } + $alert = $('
' + alertMessage + '
'); } $el.append($alert); diff --git a/jquery.dropdown.min.js b/jquery.dropdown.min.js index f76dfa7..adbb0fd 100644 --- a/jquery.dropdown.min.js +++ b/jquery.dropdown.min.js @@ -1,2 +1 @@ -!function(p){"use strict";function e(){}var n=function(){var e=navigator.userAgent.toLowerCase();if(-1!==e.indexOf("safari"))return!(-1',data:[],searchable:!0,searchNoData:'
  • 查无数据，换个词儿试试 /(ㄒoㄒ)/~~
    • ',init:e,choice:e,extendProps:[]},l={up:38,down:40,enter:13},d="click.iui-dropdown",a="focus.iui-dropdown",s="keydown.iui-dropdown",r="keyup.iui-dropdown";function c(){var e=this,t=e.config,o=e.$el,n=o.find(".dropdown-minItem-alert");clearTimeout(e.itemCountAlertTimer),0===n.length&&(n=p('
    最低选择'+t.minCount+"个
    ")),o.append(n),e.itemCountAlertTimer=setTimeout(function(){o.find(".dropdown-minItem-alert").remove()},1e3)}function u(e){var t=e||"";return t=(t=(t=(t=t.replace(/]*>/gi,"").replace("","")).replace(/<\/optgroup>/gi,"")).replace(/]*>/gi,function(e){var t=/label="(.[^"]*)"(\s|>)/.exec(e),o=/data\-group\-id="(.[^"]*)"(\s|>)/.exec(e);return'
  • '+(t?t[1]:"")+"
    • "})).replace(//gi,function(e){var t=/value="?([\w\u4E00-\u9FA5\uF900-\uFA2D]+)"?/.exec(e),o=/>(.*)<\//.exec(e),n=-1"+(o?o[1]:"")+""})}function h(e){var d={},a="",s=[],r=0,c=this.config.extendProps;return!(!e||!e.length)&&(p.each(e,function(e,o){var t=o.groupId,n=o.disabled?" disabled":"",i=o.selected&&!n?" selected":"",a="";p.each(c,function(e,t){o[t]&&(a+="data-"+t+'="'+o[t]+'" ')});var l=""+o.name+"";i&&(s.push(''+o.name+''),r++),t?d[o.groupId]?d[o.groupId]+=l:d[o.groupId]=o.groupName+"&janking&"+l:d[e]=l}),p.each(d,function(e,t){var o=t.split("&janking&");if(2===o.length){var n=o[0],i=o[1];a+=''+i+""}else a+=t}),[a,s,r])}var f={show:function(e){e.stopPropagation();p(document).trigger("click.dropdown"),this.$el.addClass("active")},search:function(o,n,i){var a,l,d,s=null,r=0;i||(i={});var c=function(){r=!1===i.leading?0:(new Date).getTime(),s=null,d=o.apply(a,l),s||(a=l=null)};return function(){var e=(new Date).getTime();r||!1!==i.leading||(r=e);var t=n-(e-r);return a=this,l=arguments,t<=0||n最多可选择'+t.limitCount+"个")),o.append(n),e.itemLimitAlertTimer=setTimeout(function(){o.find(".dropdown-maxItem-alert").remove()},1e3)}.call(n),!1;l.addClass("dropdown-chose"),n.selectAmount++}n.name=[],p.each(i.data,function(e,t){""+t.id==""+d&&((o=t).selected=!s),t.selected&&(r.push(t.name),n.name.push(''+t.name+''))}),a.find('option[value="'+d+'"]').prop("selected",!s),s&&n.selectAmount'+t.name+''))}),i.find('option[value="'+l+'"]').prop("selected",!0),o.name.push(''+o.placeholder+""),o.$choseList.html(o.name.join("")),t.choice.call(o,e)},del:function(e){var o=this,t=p(e.target),n=t.data("id");return p.each(o.name,function(e,t){if(-1!==t.indexOf('data-id="'+n+'"'))return o.name.splice(e,1),!1}),p.each(o.config.data,function(e,t){if(""+t.id==""+n)return t.selected=!1}),o.selectAmount--,o.$el.find('[data-value="'+n+'"]').removeClass("dropdown-chose"),o.$el.find('[value="'+n+'"]').prop("selected",!1).removeAttr("selected"),t.closest(".dropdown-selected").remove(),!1},clearAll:function(e){var t=this.config;return e&&e.preventDefault(),console.log(this),this.$choseList.find(".del").each(function(e,t){p(t).trigger("click")}),0'+this.config.input+"":"";return e?'
    '+t+'
    {{ul}}
    ':'×
    '+t+"{{ul}}
    "}.call(n).replace("{{ul}}","
      "+a+"
    "),i.append(o).find("ul").removeAttr("style class")),t&&(n.name=[],n.$el.find(".dropdown-selected").remove(),n.$select.val("")),n.$choseList=i.find(".dropdown-chose-list"),n.isLabelMode||n.$choseList.html(p('').text(n.placeholder)),n.$choseList.prepend(n.name?n.name.join(""):[])},bindEvent:function(){var t=this,o=t.$el,e=n?d:a;o.on(d,function(e){e.stopPropagation()}),o.on(d,".del",p.proxy(f.del,t)),t.isLabelMode?(o.on(d,".dropdown-display-label",function(){o.find("input").focus()}),t.config.searchable?o.on(a,"input",p.proxy(f.show,t)):o.on(d,p.proxy(f.show,t)),o.on(s,"input",function(e){8===e.keyCode&&""===this.value&&t.name.length&&o.find(".del").eq(-1).trigger("click")})):(o.on(e,".dropdown-display",p.proxy(f.show,t)),o.on(e,".dropdown-clear-all",p.proxy(f.clearAll,t))),o.on(r,"input",p.proxy(f.search,t)),o.on(r,function(e){e.keyCode===l.enter&&p.proxy(t.isSingleSelect?f.singleChoose:f.multiChoose,t,e)()}),o.on(s,p.proxy(f.control,t)),o.on(d,"[tabindex]",p.proxy(t.isSingleSelect?f.singleChoose:f.multiChoose,t))},unbindEvent:function(){var e=this.$el,t=n?d:a;e.off(d),e.off(d,".del"),this.isLabelMode?(e.off(d,".dropdown-display-label"),e.off(a,"input"),e.off(s,"input")):(e.off(t,".dropdown-display"),e.off(t,".dropdown-clear-all")),e.off(r,"input"),e.off(r),e.off(s),e.off(d,"[tabindex]")},changeStatus:function(e){var t=this;"readonly"===e?t.unbindEvent():"disabled"===e?(t.$select.prop("disabled",!0),t.unbindEvent()):(t.$select.prop("disabled",!1),t.bindEvent())},update:function(e,t){var o=this,n=o.config,i=(o.$el,t||!1);if("[object Array]"===Object.prototype.toString.call(e)){n.data=i?e.slice(0):n.data.concat(e);var a=h.call(o,n.data);o.name=a[1],o.selectAmount=a[2],o.$select.html(a[0]),o.renderSelect(!0,i)}},destroy:function(){this.unbindEvent(),this.$el.children().not("select").remove(),this.$el.removeClass("dropdown-single dropdown-multiple-label dropdown-multiple"),this.$select.show()},choose:function(e,n){var t="[object Array]"===Object.prototype.toString.call(e)?e:[e],i=this,a=void 0===n||!!n;p.each(t,function(e,t){var o=i.$el.find('[data-value="'+t+'"]');o.hasClass("dropdown-chose")!==a&&o.trigger(d,n||!0)})},reset:function(){f.clearAll.call(this)}},p(document).on("click.dropdown",function(){p(".dropdown-single,.dropdown-multiple,.dropdown-multiple-label").removeClass("active")}),p.fn.dropdown=function(o){return this.each(function(e,t){p(t).data("dropdown",new m(p.extend(!0,{},i,o),t))}),this}}(jQuery); - +!function(e){"use strict";function t(){}var o=function(){var e=navigator.userAgent.toLowerCase();if(-1!==e.indexOf("safari"))return!(e.indexOf("chrome")>-1)}(),n={readonly:!1,minCount:0,minCountErrorMessage:"",limitCount:1/0,limitCountErrorMessage:"",input:'',data:[],searchable:!0,searchNoData:'
  • 查无数据，换个词儿试试 /(ㄒoㄒ)/~~
    • ',init:t,choice:t,extendProps:[]},i={up:38,down:40,enter:13},a="click.iui-dropdown",l="focus.iui-dropdown",d="keydown.iui-dropdown",s="keyup.iui-dropdown",r=1e3;function c(){var t=this,o=t.config,n=t.$el,i=n.find(".dropdown-minItem-alert"),a=o.minCountErrorMessage;clearTimeout(t.itemCountAlertTimer),0===i.length&&(a||(a="最低选择"+o.minCount+"个"),i=e('
    '+a+"
    ")),n.append(i),t.itemCountAlertTimer=setTimeout(function(){n.find(".dropdown-minItem-alert").remove()},r)}function p(t){var o=t||"";return o=(o=(o=(o=o.replace(/]*>/gi,"").replace("","")).replace(/<\/optgroup>/gi,"")).replace(/]*>/gi,function(e){var t=/label="(.[^"]*)"(\s|>)/.exec(e),o=/data\-group\-id="(.[^"]*)"(\s|>)/.exec(e);return'
  • '+(t?t[1]:"")+"
    • "})).replace(//gi,function(t){var o=e(t).val(),n=/>(.*)<\//.exec(t),i=t.indexOf("selected")>-1,a=t.indexOf("disabled")>-1,l="";t.replace(/data-(\w+)="?(.[^"]+)"?/g,function(e){l+=e+" "});return"
  • "+(n?n[1]:"")+"
    • "})}function u(t){var o={},n="",i=[],a=0,l=this.config.extendProps;return!(!t||!t.length)&&(e.each(t,function(t,n){var d=n.groupId,s=n.disabled?" disabled":"",r=n.selected&&!s?" selected":"",c="";e.each(l,function(e,t){n[t]&&(c+="data-"+t+'="'+n[t]+'" ')});var p=""+n.name+"";r&&(i.push(''+n.name+''),a++),d?o[n.groupId]?o[n.groupId]+=p:o[n.groupId]=n.groupName+"&janking&"+p:o[t]=p}),e.each(o,function(e,t){var o=t.split("&janking&");if(2===o.length){var i=o[0],a=o[1];n+=''+a+""}else n+=t}),[n,i,a])}var h={show:function(t){t.stopPropagation();e(document).trigger("click.dropdown"),this.$el.addClass("active")},search:function(e,t,o){var n,i,a,l=null,d=0;o||(o={});var s=function(){d=!1===o.leading?0:(new Date).getTime(),l=null,a=e.apply(n,i),l||(n=i=null)};return function(){var r=(new Date).getTime();d||!1!==o.leading||(d=r);var c=t-(r-d);return n=this,i=arguments,c<=0||c>t?(clearTimeout(l),l=null,d=r,a=e.apply(n,i),l||(n=i=null)):l||!1===o.trailing||(l=setTimeout(s,c)),a}}(function(t){var o=this.config,n=this.$el,i=e(t.target).val(),a=this.config.data,l=[];t.keyCode>36&&t.keyCode<41||(e.each(a,function(e,t){(t.groupName&&t.groupName.toLowerCase().indexOf(i.toLowerCase())>-1||t.name.toLowerCase().indexOf(i.toLowerCase())>-1||""+t.id==""+i)&&l.push(t)}),n.find("ul").html(p(u.call(this,l)[0])||o.searchNoData))},300),control:function(t){var o,n,a,l=t.keyCode,d=0;l!==i.down&&l!==i.up||(o=l===i.up?-1:1,d=-1===(n=(a=this.$el.find("[tabindex]")).index(e(document.activeElement)))?o+1?-1:0:n,(d+=o)===a.length&&(d=0),a.eq(d).focus(),t.preventDefault())},multiChoose:function(t,o){var n,i=this,a=i.config,l=i.$select,d=e(t.target),s=d.attr("data-value"),p=d.hasClass("dropdown-chose"),u=[];if(d.hasClass("dropdown-display"))return!1;if(p)d.removeClass("dropdown-chose"),i.selectAmount--;else{if(!(i.selectAmount'+a+"")),n.append(i),t.itemLimitAlertTimer=setTimeout(function(){n.find(".dropdown-maxItem-alert").remove()},r)}.call(i),!1;d.addClass("dropdown-chose"),i.selectAmount++}i.name=[],e.each(a.data,function(e,t){""+t.id==""+s&&(n=t,t.selected=!p),t.selected&&(u.push(t.name),i.name.push(''+t.name+''))}),l.find('option[value="'+s+'"]').prop("selected",!p),p&&i.selectAmount'+t.name+''))}),a.find('option[value="'+d+'"]').prop("selected",!0),o.name.push(''+o.placeholder+""),o.$choseList.html(o.name.join("")),n.choice.call(o,t)},del:function(t){var o=this,n=e(t.target),i=n.data("id");return e.each(o.name,function(e,t){if(-1!==t.indexOf('data-id="'+i+'"'))return o.name.splice(e,1),!1}),e.each(o.config.data,function(e,t){if(""+t.id==""+i)return t.selected=!1,!1}),o.selectAmount--,o.$el.find('[data-value="'+i+'"]').removeClass("dropdown-chose"),o.$el.find('[value="'+i+'"]').prop("selected",!1).removeAttr("selected"),n.closest(".dropdown-selected").remove(),!1},clearAll:function(t){var o=this.config;return t&&t.preventDefault(),console.log(this),this.$choseList.find(".del").each(function(t,o){e(o).trigger("click")}),o.minCount>0&&c.call(this),this.$el.find(".dropdown-display").removeAttr("title"),!1}};function f(t,o){this.$el=e(o),this.$select=this.$el.find("select"),this.placeholder=this.$select.attr("placeholder"),this.config=t,this.name=[],this.isSingleSelect=!this.$select.prop("multiple"),this.selectAmount=0,this.itemLimitAlertTimer=null,this.isLabelMode="label"===this.config.multipleMode,this.init()}f.prototype={init:function(){var t=this,o=t.config,n=t.$el;t.$select.hide(),n.addClass(t.isSingleSelect?"dropdown-single":t.isLabelMode?"dropdown-multiple-label":"dropdown-multiple"),0===o.data.length&&(o.data=function(t){var o=t,n=[];function i(t,o){var n=e(o);this.id=n.prop("value"),this.name=n.text(),this.disabled=n.prop("disabled"),this.selected=n.prop("selected")}return e.each(o.children(),function(t,o){var a={},l={},d=e(o);"OPTGROUP"===o.nodeName?(l.groupId=d.data("groupId"),l.groupName=d.attr("label"),e.each(d.children(),e.proxy(i,a)),e.extend(a,l)):e.each(d,e.proxy(i,a)),n.push(a)}),n}(t.$select));var i=u.call(t,o.data);t.name=i[1],t.selectAmount=i[2],t.$select.html(i[0]),t.renderSelect(),t.changeStatus(o.disabled?"disabled":!!o.readonly&&"readonly"),t.config.init()},renderSelect:function(t,o){var n,i=this,a=i.$el,l=p(i.$select.prop("outerHTML"));t?a.find("ul")[o?"html":"append"](l):(n=function(){var e=this.isLabelMode,t=this.config.searchable?''+this.config.input+"":"";return e?'
    '+t+'
    {{ul}}
    ':'×
    '+t+"{{ul}}
    "}.call(i).replace("{{ul}}","
      "+l+"
    "),a.append(n).find("ul").removeAttr("style class")),o&&(i.name=[],i.$el.find(".dropdown-selected").remove(),i.$select.val("")),i.$choseList=a.find(".dropdown-chose-list"),i.isLabelMode||i.$choseList.html(e('').text(i.placeholder)),i.$choseList.prepend(i.name?i.name.join(""):[])},bindEvent:function(){var t=this,n=t.$el,r=o?a:l;n.on(a,function(e){e.stopPropagation()}),n.on(a,".del",e.proxy(h.del,t)),t.isLabelMode?(n.on(a,".dropdown-display-label",function(){n.find("input").focus()}),t.config.searchable?n.on(l,"input",e.proxy(h.show,t)):n.on(a,e.proxy(h.show,t)),n.on(d,"input",function(e){8===e.keyCode&&""===this.value&&t.name.length&&n.find(".del").eq(-1).trigger("click")})):(n.on(r,".dropdown-display",e.proxy(h.show,t)),n.on(r,".dropdown-clear-all",e.proxy(h.clearAll,t))),n.on(s,"input",e.proxy(h.search,t)),n.on(s,function(o){o.keyCode===i.enter&&e.proxy(t.isSingleSelect?h.singleChoose:h.multiChoose,t,o)()}),n.on(d,e.proxy(h.control,t)),n.on(a,"li[tabindex]",e.proxy(t.isSingleSelect?h.singleChoose:h.multiChoose,t))},unbindEvent:function(){var e=this.$el,t=o?a:l;e.off(a),e.off(a,".del"),this.isLabelMode?(e.off(a,".dropdown-display-label"),e.off(l,"input"),e.off(d,"input")):(e.off(t,".dropdown-display"),e.off(t,".dropdown-clear-all")),e.off(s,"input"),e.off(s),e.off(d),e.off(a,"[tabindex]")},changeStatus:function(e){var t=this;"readonly"===e?t.unbindEvent():"disabled"===e?(t.$select.prop("disabled",!0),t.unbindEvent()):(t.$select.prop("disabled",!1),t.bindEvent())},update:function(e,t){var o=this,n=o.config,i=(o.$el,t||!1);if("[object Array]"===Object.prototype.toString.call(e)){n.data=i?e.slice(0):n.data.concat(e);var a=u.call(o,n.data);o.name=a[1],o.selectAmount=a[2],o.$select.html(a[0]),o.renderSelect(!0,i)}},destroy:function(){this.unbindEvent(),this.$el.children().not("select").remove(),this.$el.removeClass("dropdown-single dropdown-multiple-label dropdown-multiple"),this.$select.show()},choose:function(t,o){var n="[object Array]"===Object.prototype.toString.call(t)?t:[t],i=this,l=void 0===o||!!o;e.each(n,function(e,t){var n=i.$el.find('[data-value="'+t+'"]');n.hasClass("dropdown-chose")!==l&&n.trigger(a,o||!0)})},reset:function(){h.clearAll.call(this)}},e(document).on("click.dropdown",function(){e(".dropdown-single,.dropdown-multiple,.dropdown-multiple-label").removeClass("active")}),e.fn.dropdown=function(t){return this.each(function(o,i){e(i).data("dropdown",new f(e.extend(!0,{},n,t),i))}),this}}(jQuery);