Question

I have no idea what this is even called so not sure where to start, hoping you all are able to point me in the right direction. I am trying to create something like this:

The idea being that when a user types something in and then separates with a comma, their input into this form field will turn into a little tag-like box that they can then delete with the x.

Any ideas on where to start?

Thanks!

Answer 1

Here is simple example: http://jsfiddle.net/9tzb4/

HTML:

<form>
  Tags:
  <div class="tag_field">
    <input type="text">  
    <input type="hidden" name="tags">
  </div>

  <br>
  <input type="submit" value="Submit">
</form>

CSS:

.tag_buttons {
  position: absolute;  
}

.tag_buttons div {
  display:inline-block;
  margin: 2px;
  border: 1px solid #666;
  padding: 1px;
}

.tag_field input[type=text] {
  padding: 5px;
  width: 300px;
  border: 1px solid #666;

}

JavaScript:

$(".tag_field").each(function() {
  var buttons = $("<div/>");
  var input = $(this).find("input[type=text]");
  var output = $(this).find("input[type=hidden]");

  var update_padding = function() {
    input.css("padding-left", buttons.width() + 2);
  };       
  setInterval(update_padding, 300);

  $(this).prepend(buttons);
  buttons.addClass("tag_buttons");
  buttons.css({ left: input.offset().left + 1,
                top: input.offset().top + 2 });
  input.bind("keyup change paste", function() {
    var i = input.val().indexOf(",");
    if (i >= 0) {
      var new_tag = input.val().substr(0, i);
      input.val(input.val().substr(i+1));
      buttons.append("<div id='button'><span class='value'>"+new_tag+"</span> <span class='close'>(x)</span></div>");
    }
  });

  var form = $(this).closest("form");
  if (form.length > 0) {
    form.submit(function() {
      var v = [];
      form.find(".tag_buttons div").each(function() {
        v.push($(this).find(".value").html());      
      });

      output.val(v.join(","));
      return false;
    });          
  }

});
$(document).on("click", ".tag_buttons span.close", {}, function(e) {
  $(e.target).closest("div").detach();      
});