形成类似标签的输入

Question

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

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

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

谢谢！

Answer 1

查看令人惊叹的jQuery chosen，其中包括您正在寻找的内容。

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

---

来自select2文档的

更新：

  

请注意，启用标记后，用户可以选择已存在的代码或创建新代码，方法是选择用户到目前为止在搜索框中输入的第一个选项。 / p>

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 Tags Input Library有帮助。它给你这样的东西