Bootstrap Tags Input

Chào các bạn, hôm nay mình xin phép giới thiệu một jquery plugins cung cấp giao diện người dùng cho Twitter Bootstrap để quản lý các tags đó là Bootstrap Tags Input.

Bài viết của mình chủ yếu là dịch từ trang chủ http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/, mình sẽ không nêu ra hết mà chỉ nêu những phần có thể áp dụng luôn được vào projects.

Các bạn có thể xem hướng dẫn download sourcecode ở trang https://github.com/bootstrap-tagsinput/bootstrap-tagsinput.

Các bạn chỉ cần thêm data-role="tagsinput" vào trường input để biến nó từ input text thành input nhập tag

<input type="text" value="" data-role="tagsinput">

Chú ý là các tag trong ô input được phân tách bằng enter hoặc dấu ,. Các bạn có thể kiểm tra các giá trị value trong ô input mà mình vừa nhập bằng cách console.log($('input').val()); Ngoài cách thêm data-role="tagsinput" thì bạn có thể viết ô input như bình thường, sau đó trong file .js bạn có thể viết như sau:

$(function () {
    $('input').tagsinput();
});

Để ý rằng ở ví dụ trên, các tag là một chuỗi được phân cách bởi dấu , trong value của ô input. Vậy nếu tag của chúng ta chứa dấu , thì sẽ như thế nào. Rất đơn giản, các bạn hãy sử dụng < select multiple /> để giải quyết vấn đề trên vì các tag sẽ được đặt trong 1 mảng.

<select multiple data-role="tagsinput">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Washington">Washington</option>
  <option value="Sydney">Sydney</option>
  <option value="Beijing">Beijing</option>
  <option value="Cairo,Hanoi">Cairo,Hanoi</option>
</select>

Bootstrap Tags Input cũng cung cấp rất nhiều option cho các bạn tùy chỉnh như sau:

tagClass: định nghĩa className cho ô input tag.

$('input').tagsinput({
  tagClass: 'label label-warning'
});

$('input').tagsinput({
  tagClass: function(item) {
    return (item.length > 10 ? 'label label-warning' : 'label label-info');
  }
});

maxTags: giới hạn số lượng tags

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

maxChars: giới hạn số kí tự cho mỗi tag

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

trimValue: tự động bỏ khoảng trắng thừa trong tags

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

allowDuplicates: nếu là true thì cho phép nhập các tags trùng nhau, default là false

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

Trên đây là mấy option mình hay sử dụng, ngoài ra các bạn có thể tìm hiểu thêm trên trang chủ của Bootstrap Tags Input.

add: add thêm 1 tag

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

remove: xóa đi 1 tag

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

Tương tự ta cũng có các method như là removeAll là xóa tất cả các tags, focus là set focus vào tagsinput, hay destroy là loại bỏ luôn tagsinput cho trở lại thành 1 ô input bình thường ...

Mình thì hay sử dụng 2 events đó là beforeItemAdd và beforeItemRemove, hiểu đơn giản là trước khi thêm hoặc xóa ` tag đó đi thì mình sẽ thực hiện thêm 1 vài thao tác với nó Ví dụ sau đây là không cho remove các tag là Hanoi và Bangkok

<script>
        var notRemove = ['Hanoi', 'Bangkok'];
        $('input').on('beforeItemRemove', function(event) {
        if ($.inArray(event.item, notRemove) >= 0) {   // event.item: contains the item
            event.cancel = true;  // event.cancel: set to true to prevent the item getting removed
        }
    });
</script>

Ngoài ra còn có các sự kiện như là itemAddedOnInit, itemAdded, itemRemoved...

Nếu các bạn muốn các tag mỗi khi được nhập sẽ hiện ra 1 list các gợi ý thì nên sử dụng kết hợp bootstrap tags input với typeahead Ví dụ như đoạn code dưới đây:

$('input').tagsinput({
        cancelConfirmKeysOnEmpty: false,
        typeahead: {
            source: function(query) {
                return $.get($('input').data('url') + '/?query='+ query);    //query get data, handling in controller
            },
            afterSelect: function(val) {
                this.$element.val(');
            },
            items: 5,
            autoSelect: false,
        },
        freeInput: true,
        maxTags: 6,
        trimValue: true,
        tagClass: 'label label-warning',
    });

source trong typeahead sẽ trả về 1 mảng các giá trị để suggest cho người dùng nhập, bạn cũng có thể sử dụng ajax để get giá trị như ví dụ trên. afterSelect sau khi select sẽ thay giá trị vừa chọn vào tag đó item là số tag gợi ý autoSelect nếu bạn để là true thì nó sẽ select cho bạn phần tử gợi ý đầu tiên

Rất đơn giản phải không ạ. Mình xin phép kết thúc bài giới thiệu của mình ở đây. Thank you!