html - 形成类似标签的输入

Question

我什至不知道这叫什么，所以不知道从哪里开始，希望你们都能为我指明正确的方向。我正在尝试创建这样的东西：

这个想法是，当用户输入一些内容然后用逗号分隔时，他们在此表单字段中的输入将变成一个类似标签的小框，然后他们可以用 x 删除它。

关于从哪里开始的任何想法？

谢谢！

Answer 1

查看惊人的jQuery selected，除其他外，它完全符合您的要求。

select2是一个类似的插件，它还允许您添加自己的标签（以及使用 AJAX 源）。

---

从select2文档更新：

请注意，启用标记后，用户可以从预先存在的标记中进行选择，或者通过选择用户迄今为止在搜索框中键入的第一个选项来创建新标记。

Answer 2

看一下这个。http://davidwalsh.name/dw-content/jquery-chosen.php这是我猜想将完全适合您的应用程序的东西。

Answer 3

这是一个简单的例子：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();      
});

Answer 4

您可能会发现jQuery 标签输入库很有帮助。它给了你这样的东西