Tạo thẻ tag trang web

Gắn sự kiện ‘change’ vào ô input keyword
lấy value của ô đó, tách chuỗi với dấu phẩy, đưa vào hàm tạo tag và đổ ngược ra ô input
nếu nhập linh tinh hay sai định dạng thì thông báo gì đó hoặc không
có thể dùng jquery

nhưng em không biết làm thế nào để nó hiện lên có thêm dấu x như thế kia ạ

lúc đưa vào hàm tạo tag thì cần tạo thêm button,
gắn sự kiện onclick cho button xóa đó
khi ấn vào button xóa thì có event.target để có thể biết được element nào đang được click vào

$('.taglist).on('click','.yourTag>button',(function(e){ $(e.target).parent().remove(); });

Phần màu cam là thẻ <div>, giả text input.
Phần màu xám mới là text input thật.
Phần “abc” là inline-block <div>.

Việc của bạn là bắt sự kiện change từ input thật.
Kiểm tra value.endWidths(',') trả về true hay không.
Nếu có lấy value.substr(0, value.length - 1) (nguyên chuỗi trừ “,”).
Tạo inline-block <div> mới, bỏ nó kế bên (sibling) “abc” với giá trị vừa tính ở trên.
Gán value = '' để value của input thật rỗng.
Focus vào input thật để nhập tag tiếp theo.

Nếu bạn hỏi để sài luôn thì google select2.

https://jsfiddle.net/7L3sbrz4/embedded/result,js,html,css
Code này mình định thử xem flex-box có thể làm cái ô màu xám trong cmt của @hungsteve nó tự co về cuối dòng không. Kết quả là chỉ css thì làm chưa được chuẩn vì nó không tính được độ dài ký tự.
Lỡ tay rồi viết thêm mấy dòng cho đầy đủ. Nói thì ngắn, code cũng không nhiều, vậy mà vật vã đến giờ mới xong.

Woa, anh Vọng làm demo luôn.
Cái đó là em chôm ý tưởng từ mobile sang đó anh, chứ web em chưa code.