commit cb6250d5c2b012f35a27e12f9a531e186dafd4c2 Author: Ben Brown Date: Tue Apr 12 17:40:07 2011 -0500 Initial import into Git diff --git a/README b/README new file mode 100644 index 0000000..77f28ab --- /dev/null +++ b/README @@ -0,0 +1,62 @@ +jQuery Tags Input Plugin 1.2 + +Copyright (c) 2010 XOXCO, Inc + +Documentation for this plugin lives here: +http://xoxco.com/clickable/jquery-tags-input + +Licensed under the MIT license: +http://www.opensource.org/licenses/mit-license.php + +ben@xoxco.com +------------------------------------------------------ + +Do you use tags to organize content on your site? +This plugin will turn your boring tag list into a +magical input that turns each tag into a style-able +object with its own delete link. The plugin handles +all the data - your form just sees a comma-delimited +list of tags! + + +Instructions + +First, add the Javascript and CSS files to your tag: + + + + +Create a real input in your form that will contain a comma-separated list of tags. +You can put any default or existing tags in the value attribute, and they'll be handled properly. + + + +Then, simply call the tagsInput function on any field that should be treated as a list of tags. + +$('#tags').tagsInput(); + +If you want to use jQuery.autocomplete, you can pass in a parameter with the autocomplete url. + +$('#tags').tagsInput({autocomplete_url:'http://myserver.com/api/autocomplete'}); + +You can also send in options to the autocomplete plugin, as described here. + +$('#tags').tagsInput({ autocomplete_url:'http://myserver.com/api/autocomplete', + autocomplete:{selectFirst:true,width:'100px',autoFill:true} +}); + +You can add and remove tags by calling the addTag() and removeTag() functions. + +$('#tags').addTag('foo'); +$('#tags').removeTag('bar'); + +Options + +$(selector).tagsInput({ + 'autocomplete_url': url_to_autocomplete_api, + 'autocomplete': { option: value, option: value}, + 'height':'100px', + 'width':'300px', + 'defaultText':'add a tag' +}); + diff --git a/jquery.tagsinput.css b/jquery.tagsinput.css new file mode 100644 index 0000000..f458143 --- /dev/null +++ b/jquery.tagsinput.css @@ -0,0 +1,6 @@ +div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;} +div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;} +div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; } +div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; } +div.tagsinput div { display:block; float: left; } +.tags_clear { clear: both; width: 100%; height: 0px; } diff --git a/jquery.tagsinput.js b/jquery.tagsinput.js new file mode 100644 index 0000000..96b1a12 --- /dev/null +++ b/jquery.tagsinput.js @@ -0,0 +1,196 @@ +/* + + jQuery Tags Input Plugin 1.2 + + Copyright (c) 2010 XOXCO, Inc + + Documentation for this plugin lives here: + http://xoxco.com/clickable/jquery-tags-input + + Licensed under the MIT license: + http://www.opensource.org/licenses/mit-license.php + + ben@xoxco.com + +*/ + +(function($) { + + var delimiter = new Array(); + + jQuery.fn.addTag = function(value,options) { + + var options = jQuery.extend({focus:false},options); + this.each(function() { + id = $(this).attr('id'); + + var tagslist = $(this).val().split(delimiter[id]); + if (tagslist[0] == '') { + tagslist = new Array(); + } + value = jQuery.trim(value); + if (value !='') { + + $(''+value + '  x').insertBefore('#'+id+'_addTag'); + tagslist.push(value); + + $('#'+id+'_tag').val(''); + if (options.focus) { + $('#'+id+'_tag').focus(); + } else { + $('#'+id+'_tag').blur(); + } + } + jQuery.fn.tagsInput.updateTagsField(this,tagslist); + + }); + + return false; + }; + + jQuery.fn.removeTag = function(value) { + + this.each(function() { + id = $(this).attr('id'); + + var old = $(this).val().split(delimiter[id]); + + + $('#'+id+'_tagsinput .tag').remove(); + str = ''; + for (i=0; i< old.length; i++) { + if (escape(old[i])!=value) { + str = str + delimiter[id] +old[i]; + } + } + + jQuery.fn.tagsInput.importTags(this,str); + }); + + return false; + + }; + + + jQuery.fn.tagsInput = function(options) { + + var settings = jQuery.extend({defaultText:'add a tag',width:'300px',height:'100px','hide':true,'delimiter':',',autocomplete:{selectFirst:false}},options); + + this.each(function() { + if (settings.hide) { + $(this).hide(); + } + + id = $(this).attr('id') + + data = jQuery.extend({ + pid:id, + real_input: '#'+id, + holder: '#'+id+'_tagsinput', + input_wrapper: '#'+id+'_addTag', + fake_input: '#'+id+'_tag' + },settings); + + + delimiter[id] = data.delimiter; + + $('
').insertAfter(this); + + $(data.holder).css('width',settings.width); + $(data.holder).css('height',settings.height); + + + if ($(data.real_input).val()!='') { + jQuery.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val()); + } else { + $(data.fake_input).val($(data.fake_input).attr('default')); + $(data.fake_input).css('color','#666666'); + } + + + $(data.holder).bind('click',data,function(event) { + $(event.data.fake_input).focus(); + }); + + // if user types a comma, create a new tag + $(data.fake_input).bind('keypress',data,function(event) { + if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13) { + + $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true}); + return false; + } + }); + + + $(data.fake_input).bind('focus',data,function(event) { + if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('default')) { + $(event.data.fake_input).val(''); + } + $(event.data.fake_input).css('color','#000000'); + }); + + if (settings.autocomplete_url != undefined) { + $(data.fake_input).autocomplete(settings.autocomplete_url,settings.autocomplete).bind('result',data,function(event,data,formatted) { + if (data) { + d = data + ""; + $(event.data.real_input).addTag(d,{focus:true}); + } + });; + + + $(data.fake_input).bind('blur',data,function(event) { + if ($(event.data.fake_input).val() != $(event.data.fake_input).attr('default')) { + $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:false}); + } + + $(event.data.fake_input).val($(event.data.fake_input).attr('default')); + $(event.data.fake_input).css('color','#666666'); + return false; + }); + + + } else { + + // if a user tabs out of the field, create a new tag + // this is only available if autocomplete is not used. + $(data.fake_input).bind('blur',data,function(event) { + var d = $(this).attr('default'); + if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) { + event.preventDefault(); + $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true}); + } else { + $(event.data.fake_input).val($(event.data.fake_input).attr('default')); + $(event.data.fake_input).css('color','#666666'); + } + return false; + }); + + } + + $(data.fake_input).blur(); + }); + + return this; + + }; + + + jQuery.fn.tagsInput.updateTagsField = function(obj,tagslist) { + + id = $(obj).attr('id'); + $(obj).val(tagslist.join(delimiter[id])); + }; + + + + jQuery.fn.tagsInput.importTags = function(obj,val) { + + $(obj).val(''); + id = $(obj).attr('id'); + var tags = val.split(delimiter[id]); + for (i=0; i