Cách tạo hộp văn bản thẻ

Question

Trong ngăn xếp chồng, chúng ta có thể thấy một hộp văn bản 'Thẻ' khi chúng ta đăng bài.

Khi nhập một từ và khoảng trắng, thẻ sẽ trở thành thẻ. Sau khi trở thành một thẻ, chúng tôi tiếp tục xóa một bức thư từ một từ. Nhưng chúng tôi có thể xóa chính từ đó bằng cách nhấp vào hình ảnh X.

Tôi muốn tạo một hộp văn bản tương tự cho thẻ. Trong stackoverflow có đề xuất tự động cũng liên kết với hộp văn bản này nhưng không cần điều đó.

Bất kỳ trợ giúp/liên kết nào sẽ được đánh giá là

Answer 1

Có toàn bộ máy chủ trực tuyến này. Tôi thấy một số người sử dụng Google khá dễ dàng. Kiểm tra một trong này ví dụ:

http://xoxco.com/projects/code/tagsinput/

Answer 2

Edit: Dưới đây là một ví dụ tương tự với một chút khác nhau (tốt hơn) chức năng:
https://stackoverflow.com/a/14083331/383904

---

A nice nhỏ demo bạn có thể dễ dàng nâng cấp và sửa đổi:

$('#tags input').on('focusout',function(){  
 
    var txt = $.trim(this.value); 
 
    if(txt) { 
 
    $(this).before('<span class="tag">'+txt+'</span>'); 
 
    } 
 
    this.value = ""; 
 
}); 
 

 

 
$('#tags').on('click','.tag',function(){ 
 
    if(confirm("Really delete this tag?")) $(this).remove(); 
 
});

#tags{ 
 
    float:left; 
 
    border:1px solid #ccc; 
 
    padding:5px; 
 
    font-family:Arial; 
 
} 
 
#tags span.tag{ 
 
    display:block; 
 
    float:left; 
 
    color:#fff; 
 
    background:#689; 
 
    padding:5px; 
 
    padding-right:25px; 
 
    margin:4px; 
 
} 
 
#tags span.tag:after{ 
 
    position:absolute; 
 
    content:"x"; 
 
    border:1px solid; 
 
    padding:0 4px; 
 
    margin:3px 0 10px 5px; 
 
    cursor:pointer; 
 
    font-size:10px; 
 
} 
 
#tags input{ 
 
    background:#eee; 
 
    border:0; 
 
    margin:4px; 
 
    padding:7px; 
 
    width:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tags"> 
 
    <input type="text" value="" placeholder="Add a tag" /> 
 
</div>