From 914798fb979c29506f58a79cd1420d840d66576c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Fagundes=20Matt=C3=A9?= Date: Tue, 20 Mar 2018 12:46:42 -0300 Subject: [PATCH 1/3] Update jquery.tagsinput.js Add new feature. When field clicked start request autocomplete. The search term is a %. Apply event click on field. --- src/jquery.tagsinput.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/jquery.tagsinput.js b/src/jquery.tagsinput.js index b6c75e4..74d1223 100644 --- a/src/jquery.tagsinput.js +++ b/src/jquery.tagsinput.js @@ -181,7 +181,10 @@ minChars:0, width:'300px', height:'100px', - autocomplete: {selectFirst: false }, + autocomplete: { + selectFirst: false, + searchWhenClick: false + }, hide:true, delimiter: ',', unique:true, @@ -189,7 +192,7 @@ placeholderColor:'#666666', autosize: true, comfortZone: 20, - inputPadding: 6*2 + inputPadding: 6*2, },options); var uniqueIdCounter = 0; @@ -275,7 +278,12 @@ } }); } else if (jQuery.ui.autocomplete !== undefined) { - $(data.fake_input).autocomplete(autocomplete_options); + if(settings.autocomplete && settings.autocomplete.searchWhenClick !== undefined && settings.autocomplete.searchWhenClick){ + $(data.fake_input).autocomplete(autocomplete_options).on("click", function(){$(this).autocomplete("search","%")}); + } else { + $(data.fake_input).autocomplete(autocomplete_options); + } + $(data.fake_input).bind('autocompleteselect',data,function(event,ui) { $(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)}); return false; From 190f31276d54b67c8cbce0a54a62bcafb564b958 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Fagundes=20Matt=C3=A9?= Date: Tue, 20 Mar 2018 12:47:45 -0300 Subject: [PATCH 2/3] Update jquery.tagsinput.min.js --- dist/jquery.tagsinput.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/jquery.tagsinput.min.js b/dist/jquery.tagsinput.min.js index fbb0c7f..d79022a 100644 --- a/dist/jquery.tagsinput.min.js +++ b/dist/jquery.tagsinput.min.js @@ -1 +1 @@ -!function(a){var b=new Array,c=new Array;a.fn.doAutosize=function(b){var c=a(this).data("minwidth"),d=a(this).data("maxwidth"),e="",f=a(this),g=a("#"+a(this).data("tester_id"));if(e!==(e=f.val())){var h=e.replace(/&/g,"&").replace(/\s/g," ").replace(//g,">");g.html(h);var i=g.width(),j=i+b.comfortZone>=c?i+b.comfortZone:c,k=f.width(),l=k>j&&j>=c||j>c&&d>j;l&&f.width(j)}},a.fn.resetAutosize=function(b){var c=a(this).data("minwidth")||b.minInputWidth||a(this).width(),d=a(this).data("maxwidth")||b.maxInputWidth||a(this).closest(".tagsinput").width()-b.inputPadding,e=a(this),f=a("").css({position:"absolute",top:-9999,left:-9999,width:"auto",fontSize:e.css("fontSize"),fontFamily:e.css("fontFamily"),fontWeight:e.css("fontWeight"),letterSpacing:e.css("letterSpacing"),whiteSpace:"nowrap"}),g=a(this).attr("id")+"_autosize_tester";!a("#"+g).length>0&&(f.attr("id",g),f.appendTo("body")),e.data("minwidth",c),e.data("maxwidth",d),e.data("tester_id",g),e.css("width",c)},a.fn.addTag=function(d,e){return e=jQuery.extend({focus:!1,callback:!0},e),this.each(function(){var f=a(this).attr("id"),g=a(this).val().split(b[f]);if(""==g[0]&&(g=new Array),d=jQuery.trim(d),e.unique){var h=a(this).tagExist(d);1==h&&a("#"+f+"_tag").addClass("not_valid")}else var h=!1;if(""!=d&&1!=h){if(a("").addClass("tag").append(a("").text(d).append("  "),a("",{href:"#",title:"Removing tag",text:"x"}).click(function(){return a("#"+f).removeTag(escape(d))})).insertBefore("#"+f+"_addTag"),g.push(d),a("#"+f+"_tag").val(""),e.focus?a("#"+f+"_tag").focus():a("#"+f+"_tag").blur(),a.fn.tagsInput.updateTagsField(this,g),e.callback&&c[f]&&c[f].onAddTag){var i=c[f].onAddTag;i.call(this,d)}if(c[f]&&c[f].onChange){var j=g.length,i=c[f].onChange;i.call(this,a(this),g[j-1])}}}),!1},a.fn.removeTag=function(d){return d=unescape(d),this.each(function(){var e=a(this).attr("id"),f=a(this).val().split(b[e]);for(a("#"+e+"_tagsinput .tag").remove(),str="",i=0;i=0},a.fn.importTags=function(b){var c=a(this).attr("id");a("#"+c+"_tagsinput .tag").remove(),a.fn.tagsInput.importTags(this,b)},a.fn.tagsInput=function(e){var f=jQuery.extend({interactive:!0,defaultText:"add a tag",minChars:0,width:"300px",height:"100px",autocomplete:{selectFirst:!1},hide:!0,delimiter:",",unique:!0,removeWithBackspace:!0,placeholderColor:"#666666",autosize:!0,comfortZone:20,inputPadding:12},e),g=0;return this.each(function(){if("undefined"==typeof a(this).attr("data-tagsinput-init")){a(this).attr("data-tagsinput-init",!0),f.hide&&a(this).hide();var e=a(this).attr("id");(!e||b[a(this).attr("id")])&&(e=a(this).attr("id","tags"+(new Date).getTime()+g++).attr("id"));var h=jQuery.extend({pid:e,real_input:"#"+e,holder:"#"+e+"_tagsinput",input_wrapper:"#"+e+"_addTag",fake_input:"#"+e+"_tag"},f);b[e]=h.delimiter,(f.onAddTag||f.onRemoveTag||f.onChange)&&(c[e]=new Array,c[e].onAddTag=f.onAddTag,c[e].onRemoveTag=f.onRemoveTag,c[e].onChange=f.onChange);var i='
';if(f.interactive&&(i=i+''),i+='
',a(i).insertAfter(this),a(h.holder).css("width",f.width),a(h.holder).css("min-height",f.height),a(h.holder).css("height",f.height),""!=a(h.real_input).val()&&a.fn.tagsInput.importTags(a(h.real_input),a(h.real_input).val()),f.interactive){if(a(h.fake_input).val(a(h.fake_input).attr("data-default")),a(h.fake_input).css("color",f.placeholderColor),a(h.fake_input).resetAutosize(f),a(h.holder).bind("click",h,function(b){a(b.data.fake_input).focus()}),a(h.fake_input).bind("focus",h,function(b){a(b.data.fake_input).val()==a(b.data.fake_input).attr("data-default")&&a(b.data.fake_input).val(""),a(b.data.fake_input).css("color","#000000")}),void 0!=f.autocomplete_url){autocomplete_options={source:f.autocomplete_url};for(attrname in f.autocomplete)autocomplete_options[attrname]=f.autocomplete[attrname];void 0!==jQuery.Autocompleter?(a(h.fake_input).autocomplete(f.autocomplete_url,f.autocomplete),a(h.fake_input).bind("result",h,function(b,c,d){c&&a("#"+e).addTag(c[0]+"",{focus:!0,unique:f.unique})})):void 0!==jQuery.ui.autocomplete&&(a(h.fake_input).autocomplete(autocomplete_options),a(h.fake_input).bind("autocompleteselect",h,function(b,c){return a(b.data.real_input).addTag(c.item.value,{focus:!0,unique:f.unique}),!1}))}else a(h.fake_input).bind("blur",h,function(b){var c=a(this).attr("data-default");return""!=a(b.data.fake_input).val()&&a(b.data.fake_input).val()!=c?b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length)&&a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:!0,unique:f.unique}):(a(b.data.fake_input).val(a(b.data.fake_input).attr("data-default")),a(b.data.fake_input).css("color",f.placeholderColor)),!1});a(h.fake_input).bind("keypress",h,function(b){return d(b)?(b.preventDefault(),b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length)&&a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:!0,unique:f.unique}),a(b.data.fake_input).resetAutosize(f),!1):void(b.data.autosize&&a(b.data.fake_input).doAutosize(f))}),h.removeWithBackspace&&a(h.fake_input).bind("keydown",function(b){if(8==b.keyCode&&""==a(this).val()){b.preventDefault();var c=a(this).closest(".tagsinput").find(".tag:last").text(),d=a(this).attr("id").replace(/_tag$/,"");c=c.replace(/[\s]+x$/,""),a("#"+d).removeTag(escape(c)),a(this).trigger("focus")}}),a(h.fake_input).blur(),h.unique&&a(h.fake_input).keydown(function(b){(8==b.keyCode||String.fromCharCode(b.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/))&&a(this).removeClass("not_valid")})}}}),this},a.fn.tagsInput.updateTagsField=function(c,d){var e=a(c).attr("id");a(c).val(d.join(b[e]))},a.fn.tagsInput.importTags=function(d,e){a(d).val("");var f=a(d).attr("id"),g=e.split(b[f]);for(i=0;i/g,">");u.html(r);var d=u.width(),s=d+a.comfortZone>=e?d+a.comfortZone:e;(s=e||s>e&&s").css({position:"absolute",top:-9999,left:-9999,width:"auto",fontSize:n.css("fontSize"),fontFamily:n.css("fontFamily"),fontWeight:n.css("fontWeight"),letterSpacing:n.css("letterSpacing"),whiteSpace:"nowrap"}),u=t(this).attr("id")+"_autosize_tester";!t("#"+u).length>0&&(o.attr("id",u),o.appendTo("body")),n.data("minwidth",e),n.data("maxwidth",i),n.data("tester_id",u),n.css("width",e)},t.fn.addTag=function(i,n){return n=jQuery.extend({focus:!1,callback:!0},n),this.each(function(){var o=t(this).attr("id"),u=t(this).val().split(a[o]);if(""==u[0]&&(u=new Array),i=jQuery.trim(i),n.unique)1==(r=t(this).tagExist(i))&&t("#"+o+"_tag").addClass("not_valid");else var r=!1;if(""!=i&&1!=r){if(t("").addClass("tag").append(t("").text(i).append("  "),t("",{href:"#",title:"Removing tag",text:"x"}).click(function(){return t("#"+o).removeTag(escape(i))})).insertBefore("#"+o+"_addTag"),u.push(i),t("#"+o+"_tag").val(""),n.focus?t("#"+o+"_tag").focus():t("#"+o+"_tag").blur(),t.fn.tagsInput.updateTagsField(this,u),n.callback&&e[o]&&e[o].onAddTag)e[o].onAddTag.call(this,i);if(e[o]&&e[o].onChange){var d=u.length;e[o].onChange.call(this,t(this),u[d-1])}}}),!1},t.fn.removeTag=function(n){return n=unescape(n),this.each(function(){var o=t(this).attr("id"),u=t(this).val().split(a[o]);for(t("#"+o+"_tagsinput .tag").remove(),str="",i=0;i=0},t.fn.importTags=function(a){var e=t(this).attr("id");t("#"+e+"_tagsinput .tag").remove(),t.fn.tagsInput.importTags(this,a)},t.fn.tagsInput=function(i){var o=jQuery.extend({interactive:!0,defaultText:"add a tag",minChars:0,width:"300px",height:"100px",autocomplete:{selectFirst:!1,searchWhenClick:!1},hide:!0,delimiter:",",unique:!0,removeWithBackspace:!0,placeholderColor:"#666666",autosize:!0,comfortZone:20,inputPadding:12},i),u=0;return this.each(function(){if(void 0===t(this).attr("data-tagsinput-init")){t(this).attr("data-tagsinput-init",!0),o.hide&&t(this).hide();var i=t(this).attr("id");i&&!a[t(this).attr("id")]||(i=t(this).attr("id","tags"+(new Date).getTime()+u++).attr("id"));var r=jQuery.extend({pid:i,real_input:"#"+i,holder:"#"+i+"_tagsinput",input_wrapper:"#"+i+"_addTag",fake_input:"#"+i+"_tag"},o);a[i]=r.delimiter,(o.onAddTag||o.onRemoveTag||o.onChange)&&(e[i]=new Array,e[i].onAddTag=o.onAddTag,e[i].onRemoveTag=o.onRemoveTag,e[i].onChange=o.onChange);var d='
';if(o.interactive&&(d=d+''),t(d+='
').insertAfter(this),t(r.holder).css("width",o.width),t(r.holder).css("min-height",o.height),t(r.holder).css("height",o.height),""!=t(r.real_input).val()&&t.fn.tagsInput.importTags(t(r.real_input),t(r.real_input).val()),o.interactive){if(t(r.fake_input).val(t(r.fake_input).attr("data-default")),t(r.fake_input).css("color",o.placeholderColor),t(r.fake_input).resetAutosize(o),t(r.holder).bind("click",r,function(a){t(a.data.fake_input).focus()}),t(r.fake_input).bind("focus",r,function(a){t(a.data.fake_input).val()==t(a.data.fake_input).attr("data-default")&&t(a.data.fake_input).val(""),t(a.data.fake_input).css("color","#000000")}),null!=o.autocomplete_url){for(attrname in autocomplete_options={source:o.autocomplete_url},o.autocomplete)autocomplete_options[attrname]=o.autocomplete[attrname];void 0!==jQuery.Autocompleter?(t(r.fake_input).autocomplete(o.autocomplete_url,o.autocomplete),t(r.fake_input).bind("result",r,function(a,e,n){e&&t("#"+i).addTag(e[0]+"",{focus:!0,unique:o.unique})})):void 0!==jQuery.ui.autocomplete&&(o.autocomplete&&void 0!==o.autocomplete.searchWhenClick&&o.autocomplete.searchWhenClick?t(r.fake_input).autocomplete(autocomplete_options).on("click",function(){t(this).autocomplete("search","%")}):t(r.fake_input).autocomplete(autocomplete_options),t(r.fake_input).bind("autocompleteselect",r,function(a,e){return t(a.data.real_input).addTag(e.item.value,{focus:!0,unique:o.unique}),!1}))}else t(r.fake_input).bind("blur",r,function(a){var e=t(this).attr("data-default");return""!=t(a.data.fake_input).val()&&t(a.data.fake_input).val()!=e?a.data.minChars<=t(a.data.fake_input).val().length&&(!a.data.maxChars||a.data.maxChars>=t(a.data.fake_input).val().length)&&t(a.data.real_input).addTag(t(a.data.fake_input).val(),{focus:!0,unique:o.unique}):(t(a.data.fake_input).val(t(a.data.fake_input).attr("data-default")),t(a.data.fake_input).css("color",o.placeholderColor)),!1});t(r.fake_input).bind("keypress",r,function(a){if(n(a))return a.preventDefault(),a.data.minChars<=t(a.data.fake_input).val().length&&(!a.data.maxChars||a.data.maxChars>=t(a.data.fake_input).val().length)&&t(a.data.real_input).addTag(t(a.data.fake_input).val(),{focus:!0,unique:o.unique}),t(a.data.fake_input).resetAutosize(o),!1;a.data.autosize&&t(a.data.fake_input).doAutosize(o)}),r.removeWithBackspace&&t(r.fake_input).bind("keydown",function(a){if(8==a.keyCode&&""==t(this).val()){a.preventDefault();var e=t(this).closest(".tagsinput").find(".tag:last").text(),i=t(this).attr("id").replace(/_tag$/,"");e=e.replace(/[\s]+x$/,""),t("#"+i).removeTag(escape(e)),t(this).trigger("focus")}}),t(r.fake_input).blur(),r.unique&&t(r.fake_input).keydown(function(a){(8==a.keyCode||String.fromCharCode(a.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/))&&t(this).removeClass("not_valid")})}}}),this},t.fn.tagsInput.updateTagsField=function(e,i){var n=t(e).attr("id");t(e).val(i.join(a[n]))},t.fn.tagsInput.importTags=function(n,o){t(n).val("");var u=t(n).attr("id"),r=o.split(a[u]);for(i=0;i Date: Tue, 20 Mar 2018 12:56:21 -0300 Subject: [PATCH 3/3] Update README.md --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a8abe7a..0e74e28 100644 --- a/README.md +++ b/README.md @@ -44,10 +44,16 @@ autocomplete url. If you're using the bassistance jQuery.autocomplete, which takes extra parameters, you can also send in options to the autocomplete plugin, as described here. +searchWhenClick: Boolean - When true search on click by parameter % $('#tags').tagsInput({ autocomplete_url:'http://myserver.com/api/autocomplete', - autocomplete:{selectFirst:true,width:'100px',autoFill:true} + autocomplete:{ + selectFirst:true, + width:'100px', + autoFill:true, + searchWhenClick: false + } }); You can add and remove tags by calling the addTag() and removeTag() functions.