Question

Hi i have this little plugin installed:

    (function($) {
  $.fn.tagfield = function(options) {
    if (options && options.add) {
      this.each(function(i, elem) {
        add_tags(elem, options.add);
      });
    } if (options && options.remove) {
      this.each(function(i, elem) {
        remove_tags(elem, options.add);
      });
    } else {
      this.each(function(i, elem) {
        var initial_tags = $(elem).val();
        $(elem).val('');

        tagfield(this, $(elem));

        $(initial_tags.split(',')).each(function(i, v) {
          v = $.trim(v);
          if (v !== '') add_tags(elem, v);
        })
      });
    }
  };

  var KEYS = {
    "enter": "\r".charCodeAt(0),
    "space": " ".charCodeAt(0),
    "comma": 188,
    "backspace": 8
  };

  var tagfield_id_for = function(real_input) {
    return $(real_input).attr('id') + '_tagfield';
  };

  var add_tags = function(real_input, text) {
    remove_tags(real_input, text);
    var tag = $('<span class="tag">').append('<span class="text">' + text +'</span>'),
        close = $('<a class="close" href="#">X</a>');
    close.click(function(e) {
      remove_tags(real_input, text);
    });
    tag.append(close);
    $('#' + tagfield_id_for(real_input) + " .tags").append(tag);

    real_input = $(real_input);
    real_input.val(($.trim(real_input.val()) === '' ? [] : real_input.val().split(',')).concat([text]).join(','));
  };

  var remove_tags = function(real_input, text) {
    $('#' + tagfield_id_for(real_input) + " .tags .tag").each(function(i, v) {
      v = $(v);
      if (v.find('.text').html() === text) {
        v.remove();
        real_input = $(real_input);

        var tags = $(real_input.val().split(',')).filter(function(i, v) {
          return v !== text;
        });
        real_input.val(Array.prototype.join.call(tags));
      }
    });
  };

  var tagfield = function(real_input, elem) {
    var tagfield = $('<div class="tagfield">').attr('id', tagfield_id_for(real_input)),
        input = $('<input type="text"/>'),
        buffer = $('<span class="buffer">'),
        tags   = $('<span class="tags">');
    tagfield.append(tags);
    tagfield.append(buffer);
    tagfield.append(input);

    tagfield.click(function(e) {
      input.focus();
    });

    var check_add_tag = function() {
      if (buffer.html()) {
        var tag_text = buffer.html();
        buffer.html('');
        add_tags(real_input, tag_text);
      }
    };

    var add_tag = function(text) {
    };

    input.keydown(function(e) {
      if (e.which === KEYS.enter || e.which === KEYS.space || e.which === KEYS.comma) {
        e.preventDefault();
        check_add_tag();
      }

      if (e.which === KEYS.backspace) {
        if (buffer.html() === "") {
          remove_tags(real_input, tagfield.find('.tag').last().find('.text').html());
        } else {
          var s = buffer.html();
          buffer.html(s.slice(0, s.length-1));
        }
      }
    });

    input.blur(check_add_tag);

    input.keyup(function(e) {
      buffer.append(input.val());
      input.val('');
    });

    $(real_input).hide().after(tagfield);
  };

})(jQuery);

does anyone can show me how can i call the methods add_tags() and remove_tags() ?

thanks

Answer 1

$("selector").tagfield({remove:someobject}); 
$("selector").tagfield({add:someobject});

but the “remove” thing will not work i think, since the second “if” in fn.tagfield watches for “options.remove” but removes the “options.add” …