表单标签式输入

Question

我不知道这是甚至叫什么，所以不知道从哪里开始，希望你们都能够指向正确的方向。我想创建这样的事情：

的想法是，当用户键入的东西在，然后用逗号分隔，他们的投入到这个表单字段会变成一个小标签的样箱他们可以用x删除它们。

任何想法从哪里开始？

谢谢！

Answer 1

下面是简单的例子：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 2

检查出惊人的jQuery chosen，其中包括 - 正是你要找的东西。

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

---

更新从select2文档：

需要注意的是启动时带标记的用户可以从预先存在的标签选择或采摘的首选是创建一个新的标签到目前为止用户输入到搜索框中的内容。

Answer 3

看看这个。 http://davidwalsh.name/dw-content/jquery-chosen.php这是我猜测的事情将完美套装您的应用程序。

Answer 4

您可能会发现jQuery Tags Input Library helpful。它给你这样的东西