├── .gitignore ├── README.md ├── dist ├── inputTags.jquery.min.js └── inputTags.min.css ├── index.html ├── package-lock.json ├── package.json ├── src ├── index.js ├── inputTags.css └── inputTags.less └── webpack.mix.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | node_modules/* 3 | /.vs 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # inputTags.js 2 | 3 | ## Presentation 4 | [inputTags.js](http://betaweb.github.io/inputTags-jQuery-plugin/) is a simple jQuery plugin allowing to add, edit or remove tags in a tags list. 5 | 6 | ## Installation 7 | Make sure you include the script after the jQuery library. 8 | ```html 9 | 10 | 11 | ``` 12 | 13 | ## Getting started 14 | Setting up [inputTags.js](http://betaweb.github.io/inputTags-jQuery-plugin/) is very easy. You just have to add this few lines below and that's it ! 15 | 16 | **HTML**: 17 | 18 | ```html 19 | 20 | ``` 21 | 22 | **JS**: 23 | ```js 24 | $('#tags').inputTags(); 25 | ``` 26 | 27 | 28 | ## Basic usage 29 | 30 | **Initialize plugin with custom tags** 31 | Allows you to add custom tags on plugin initialization. 32 | ```js 33 | $('#tags').inputTags({ 34 | tags: ['jQuery', 'tags', 'plugin'] // Custom tags list 35 | }); 36 | ``` 37 | 38 | ## Advanced usage 39 | 40 | **Initialize plugin with tags autocomplete** 41 | Allows you to add a custom list from which the user can choose one or more tags. 42 | ```js 43 | $('#tags').inputTags({ 44 | autocomplete: { 45 | values: ['Pellentesque', 'habitant', 'morbi', 'tristique', 'senectus'] // autocomplete list 46 | } 47 | }); 48 | ``` 49 | 50 | ### Methods 51 | **Coming soon...** 52 | 53 | ### Events 54 | **Add events listener on plugin initialization** 55 | ```js 56 | $('#tags').inputTags({ 57 | init: function($elem) { 58 | console.log('Event called on plugin init', $elem); 59 | }, 60 | create: function() { 61 | console.log('Event called when an item is created'); 62 | }, 63 | update: function() { 64 | console.log('Event called when an item is updated'); 65 | }, 66 | destroy: function() { 67 | console.log('Event called when an item is deleted'); 68 | }, 69 | selected: function() { 70 | console.log('Event called when an item is selected'); 71 | }, 72 | unselected: function() { 73 | console.log('Event called when an item is unselected'); 74 | }, 75 | change: function($elem) { 76 | console.log('Event called on item change', $elem); 77 | } 78 | }); 79 | ``` 80 |
81 | **Add events after plugin initialization** 82 | ```js 83 | $('#tags').inputTags().on('change', function($elem) { 84 | console.log('Event called on item change', $elem); 85 | }); 86 | ``` 87 | same as: 88 | ```js 89 | $('#tags').inputTags('event', 'change', function($elem) { 90 | console.log('Event called on item change', $elem); 91 | }); 92 | ``` 93 | -------------------------------------------------------------------------------- /dist/inputTags.jquery.min.js: -------------------------------------------------------------------------------- 1 | (()=>{var t,e={419:()=>{function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}var e;(e=jQuery).fn.inputTags=function(n){if("inputTags"in window||(window.inputTags={instances:[]}),window.inputTags.methods={tags:function(e,n){if(e){switch(t(e)){case"string":switch(e){case"_toString":var o=i.tags.toString();return n?n(o):o;case"_toObject":var s=i._toObject(i.tags);return n?n(s):s;case"_toJSON":s=i._toObject(i.tags);var a=JSON.stringify(s);return n?n(a):a;case"_toArray":return n?n(i.tags):i.tags}var r=e.split(",");if(r.length>1){var u=i.tags;i.tags=u.concat(r)}else i.tags.push(r[0]);break;case"object":u=i.tags,"[object Object]"===Object.prototype.toString.call(e)&&(e=Object.keys(e).map((function(t){return e[t]}))),i.tags=u.concat(e);break;case"function":return e(i.tags)}if(i._clean(),i._fill(),i._updateValue(),i.destroy(),i._setInstance(i),n)return n(i.tags)}return i.tags},event:function(t,e){i.options[t]=e,i._setInstance(i)},options:function(t,e){return t||e?e?(i.options[t]=e,void i._setInstance(i)):i.options[t]:i.options},destroy:function(){var t=e(this).attr("data-uniqid");delete window.inputTags.instances[t]}},"object"===t(n)||!n)return n=e.extend(!0,{},e.fn.inputTags.defaults,n),this.each((function(){var o=e(this);o.KEY_ENTER="Enter",o.KEY_COMMA=",",o.KEY_ESCAPE="Escape",o.UNIQID=Math.round(Date.now()/(494*Math.random()-54)),o.DEFAULT_CLASS="inputTags",o.ELEMENT_CLASS=o.DEFAULT_CLASS+"-"+o.UNIQID,o.LIST_CLASS=o.DEFAULT_CLASS+"-list",o.ITEM_CLASS=o.DEFAULT_CLASS+"-item",o.ITEM_CONTENT='%s×',o.FIELD_CLASS=o.DEFAULT_CLASS+"-field",o.ERROR_CLASS=o.DEFAULT_CLASS+"-error",o.ERROR_CONTENT='

%s

',o.AUTOCOMPLETE_LIST_CLASS=o.DEFAULT_CLASS+"-autocomplete-list",o.AUTOCOMPLETE_ITEM_CLASS=o.DEFAULT_CLASS+"-autocomplete-item",o.AUTOCOMPLETE_ITEM_CONTENT='
  • %s
    • ',o.options=n,o.keys=[o.KEY_ENTER,o.KEY_COMMA,o.KEY_ESCAPE],o.tags=[],o.options.keys.length>0&&(o.keys=o.keys.concat(o.options.keys)),o.init=function(){o.addClass(o.ELEMENT_CLASS).attr("data-uniqid",o.UNIQID),o.$element=e("."+o.ELEMENT_CLASS),o.$element.hide(),o.build(),o.fill(),o.save(),o.edit(),o.destroy(),o._autocomplete._init(),o._focus()},o.build=function(){o.$html=e("
    ").addClass(o.LIST_CLASS),o.$input=e("").attr({type:"text",class:o.FIELD_CLASS}),o.$html.insertAfter(o.$element).prepend(o.$input),o.$list=o.$element.next("."+o.LIST_CLASS),o.$list.on("click",(function(t){if(e(t.target).hasClass("inputTags-field"))return!1;o.$input.focus()}))},o.fill=function(){if(o._getDefaultValues(),0===o.options.tags)return!1;o._concatenate(),o._updateValue(),o._fill()},o._fill=function(){o.tags.forEach((function(t,e){var n=o._validate(t,!1);(!0===n||"max"===n&&e+1<=o.options.max)&&o._buildItem(t)}))},o._clean=function(){e("."+o.ITEM_CLASS,o.$list).remove()},o.save=function(){o.$input.on("keyup",(function(t){t.preventDefault();var n=t.key,i=o.$input.val().trim();if(e.inArray(n,o.keys)<0)return o._autocomplete._init(!0),o._autocomplete._show(),!1;if(o.KEY_ESCAPE===n)return o._cancel(),o._autocomplete._hide(),!1;if(i=o.KEY_COMMA===n?i.slice(0,-1):i,!o._validate(i,!0))return!1;if(o.options.only&&o._exists(i))return o._errors("exists"),!1;if(o.$input.hasClass("is-edit")){var s=o.$input.attr("data-old-value");if(s===i)return o._cancel(),!0;o._update(s,i),o._clean(),o._fill()}else{if(o._autocomplete._isSet()&&o._autocomplete._get("only")&&e.inArray(i,o._autocomplete._get("values"))<0)return o._autocomplete._hide(),o._errors("autocomplete_only"),!1;if(o._exists(i)){o.$input.removeClass("is-autocomplete"),o._errors("exists");var a=e('[data-tag="'+i+'"]',o.$list);return a.addClass("is-exists"),setTimeout((function(){a.removeClass("is-exists")}),300),!1}o._buildItem(i),o._insert(i)}return o._cancel(),o._updateValue(),o.destroy(),o._autocomplete._build(),o._setInstance(o),o.$input.focus(),!1}))},o.edit=function(){o.$list.on("click","."+o.ITEM_CLASS,(function(t){if(e(t.target).hasClass("close-item")||!1===o.options.editable||o._autocomplete._isSet()&&o._autocomplete._get("only"))return o._cancel(),!0;var n=e(this).addClass("is-edit"),i=e(".value",n).text();o.$input.width(n.outerWidth()).insertAfter(n).addClass("is-edit").attr("data-old-value",i).val(i).focus(),o._bindEvent("selected"),o.$input.on("blur",(function(){o._cancel(),o._bindEvent("unselected")}))}))},o.destroy=function(){e("."+o.ITEM_CLASS,o.$list).off("click").on("click",".close-item",(function(){var t=e(this).parent("."+o.ITEM_CLASS),n=e(".value",t).text();t.addClass("is-closed"),setTimeout((function(){o._pop(n),o._updateValue(),t.remove(),o._autocomplete._build(),o.$input.focus(),o._setInstance(o)}),200)}))},o._buildItem=function(t){var n=e(o.ITEM_CONTENT.replace("%s",t));e("").addClass(o.ITEM_CLASS+" is-closed").attr("data-tag",t).html(n).insertBefore(o.$input).delay(100).queue((function(){e(this).removeClass("is-closed")}))},o._getIndex=function(t){return o.tags.indexOf(t)},o._concatenate=function(){o.options.max>0&&o.options.tags.length>o.options.max&&o.options.tags.splice(-Math.abs(o.options.tags.length-o.options.max)),o.tags=o.tags.concat(o.options.tags)},o._getDefaultValues=function(){o.$element.val().length>0?o.tags=o.tags.concat(o.$element.val().split(o.KEY_COMMA)):o.$element.prop("value","")},o._insert=function(t){o.tags.push(t),o._bindEvent(["change","create"])},o._update=function(t,e){var n=o._getIndex(t);o.tags[n]=e,o._bindEvent(["change","update"])},o._pop=function(t){var e=o._getIndex(t);if(e<0)return!1;o.tags.splice(e,1),o._bindEvent(["change","destroy"])},o._cancel=function(){e("."+o.ITEM_CLASS).removeClass("is-edit"),o.$input.removeClass("is-edit is-autocomplete").removeAttr("data-old-value style").val("").appendTo(o.$list)},o._autocomplete={_isSet:function(){return o.options.autocomplete.values.length>0},_init:function(t){if(!o._autocomplete._isSet())return!1;o._autocomplete._build(t)},_build:function(t){var n=o.$input.val().trim().toLowerCase();o._autocomplete._exists()&&o.$autocomplete.remove(),o.$autocomplete=e("