GIỚI THIỆU JQUERY PLUGIN: BOOTSTRAP TAGS INPUT

• Trong quá trình làm dự án, mình có gặp phải một task, là làm sao để cho người dùng có thể dễ dàng đánh các tags cho các bài viết của họ. Việc đánh tags hiện nay rất phổ biết trên các bài báo, các blog... và tất nhiên cũng có rất nhiều cách để giải quyết vấn đề này.

• Ở bài viết này mình xin giới thiệu đến các bạn một giải pháp rất đơn giản mà lại hiệu quả đẹp mắt, đó là sử dụng jQuyery plugin: Bootstrap Tags Input của tác giả TimSchlechter

• Để sử dụng plugin này trước tiên bạn cần download và include nó vào project của bạn, bạn có thể clone về tại đây

• Sau đó bạn cần thêm thuộc tính data-role="tagsinput" vào thẻ input mà bạn muốn cho người dùng đánh tags. Demo

I. Các Events

beforeItemAdd

Sự kiện được khích hoạt ngay trước khi một item được thêm vào. Ví dụ:

$('input').on('beforeItemAdd', function(event) {
  // event.item: chứa các item
  // event.cancel: set bằng true để ngăn các item được thêm vào
});

itemAdded

Sự kiện được khích hoạt sau khi một item được thêm vào. Ví dụ:

$('input').on('itemAdded', function(event) {
  // event.item: chứa các item
});

beforeItemRemove Sự kiện được khích hoạt trước khi một item được xóa đi. Ví dụ:

$('input').on('beforeItemRemove', function(event) {
  // event.item: chứa các item
  // event.cancel: set bằng true để ngăn các item bị xóa đi
});

itemRemoved

Sự kiện được khích hoạt saukhi một item được xóa đi. Ví dụ:

$('input').on('itemRemoved', function(event) {
  // event.item: chứa các item
});

II. Các Methods

add

Thêm một tag. Ví dụ:

$('input').tagsinput('add', 'some tag');

hoặc:

$('input').tagsinput('add', { id: 1, text: 'some tag' });

remove

Xóa một tag. Ví dụ:

$('input').tagsinput('remove', 'some tag');

hoặc:

$('input').tagsinput('remove', { id: 1, text: 'some tag' });

removeAll

Xóa bỏ tất cả các tag. Ví dụ:

$('input').tagsinput('removeAll');

focus

focus vào tagsinput. Ví dụ:

$('input').tagsinput('focus');

input

Trả lại nội dung bên trong thẻ input

var $elt = $('input').tagsinput('input');

refresh

Khi bạn thay đổi nội dung tags, refresh sẽ cần thiết để tìm ra những tag phù hợp với nội dung bạn gõ

$('input').tagsinput('refresh');

<b><ins>destroy

Loại bỏ tagsinput

$('input').tagsinput('destroy');

III. Các Options###

tagClass

Đặt tên class cho các tags

$('input').tagsinput({
  tagClass: 'big'
});

hoặc phương thức trả lại tên class

$('input').tagsinput({
  tagClass: function(item) {
    return (item.length > 10 ? 'big' : 'small');
  }
});

itemValue

Giá trị nhận được của các item khi ta thêm các tags

$('input').tagsinput({
    itemValue: 'id'
});

hoặc phương thức trả lại giá trị của từng item

$('input').tagsinput({
  itemValue: function(item) {
    return item.id;
  }
});

itemText

Đặt nhãn cho các item, nếu thuộc tính này không được set thì mặc định sẽ sử dụng giá trị itemValue

$('input').tagsinput({
  itemText: 'label'
});

hoặc phương thức trả lại label của từng item

$('input').tagsinput({
  itemText: function(item) {
    return item.label;
  }
});

confirmKeys

Mảng mã phím thêm một tags khi gõ, mặc định là phím Enter(13) ,(188)

$('input').tagsinput({
  confirmKeys: [13, 44]
});

maxTags

Giới hạn số lượng tags, mặc định là không giới hạn

$('input').tagsinput({
  maxTags: 3
});

maxChars

Định nghĩa độ dài tối đa của một tags, mặc định là không giới hạn

$('input').tagsinput({
  maxChars: 8
});

trimValue Khi được đặt là true thì nó sẽ xóa các khoảng trắng xung quanh các tag, mặc định là false

$('input').tagsinput({
  trimValue: true
});

allowDuplicates

Khi được đặt là true thì nó cho phép một tag xuất hiện nhiều lần, mặc định là false

$('input').tagsinput({
  allowDuplicates: true
});

typeahead

Object chứa các item cho người dùng lựa chọn làm tags

$('input').tagsinput({
  typeahead: {
    source: ['jQuery', 'PHP', 'Ajax', 'GIT', 'HTML']
  }
});

freeInput

Cho phép tạo các tags ngoài các item trả lại từ typeahead, Nhưng khi tùy chọn itemValue được thiết lập, tùy chọn này sẽ bị bỏ qua.

$('input').tagsinput({
  typeahead: {
    source: ['jQuery', 'PHP', 'Ajax', 'GIT', 'HTML']
  },
  freeInput: true
});