(function($) { /** Available options are: * availableTags (Array) -- Used as tag suggestions * existingTags (Array) *optional -- Used to prefill the tag selector with tags * namePrefix (String) *optional -- Used as input name attribute, default to "item[tags]" */ $.fn.tagit = function(options) { var el = this; const BACKSPACE = 8; const ENTER = 13; const SPACE = 32; const COMMA = 44; // add the tagit CSS class. el.addClass("tagit"); // create the input field. var html_input_field = "
\n"; el.html (html_input_field); tag_input = el.children(".tagit-new").children(".tagit-input"); if (typeof options.existingTags != 'undefined' && typeof options.existingTags == 'object') { for(var i in options.existingTags) { create_choice(options.existingTags[i]); } } $(this).click(function(e){ if (e.target.tagName == 'A') { // Removes a tag when the little 'x' is clicked. // Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it. $(e.target).parent().remove(); } else { // Sets the focus() to the input field, if the user clicks anywhere inside the UL. // This is needed because the input field needs to be of a small size. tag_input.focus(); } }); tag_input.keypress(function(event){ if (event.which == BACKSPACE) { if (tag_input.val() == "") { // When backspace is pressed, the last tag is deleted. $(el).children(".tagit-choice:last").remove(); } } // Comma/Space/Enter are all valid delimiters for new tags. else if (event.which == COMMA || event.which == SPACE || event.which == ENTER) { event.preventDefault(); var typed = tag_input.val(); typed = typed.replace(/,+$/,""); typed = typed.trim(); if (typed != "") { if (is_new (typed)) { create_choice(typed); } // Cleaning the input. tag_input.val(""); } } }); tag_input.autocomplete({ source: options.availableTags, select: function(event,ui){ if (is_new (ui.item.value)) { create_choice (ui.item.value); } // Cleaning the input. tag_input.val(""); // Preventing the tag input to be update with the chosen value. return false; } }); function is_new (value){ var is_new = true; this.tag_input.parents("ul").children(".tagit-choice").each(function(i){ n = $(this).children("input").val(); if (value == n) { is_new = false; } }) return is_new; } function create_choice (value){ name_prefix = (typeof(options.namePrefix) == 'undefined') ? 'item[tags]' : options.namePrefix; var el = ""; el = "