Xây dựng tính năng tạo tag đơn giản với Select2

https://select2.github.io/

Nhân dịp EmbedSlide ra tính năng cho phép đánh tag khi thực hiện nhúng slide, và cũng đã lâu không có bài chia sẻ nào về kỹ thuật, nên hôm nay mình viết một bài chia sẻ về cách tạo input-tag như tính năng của EmbedSlide. Giới thiệu sơ về Select2 - đây là một bộ tool cực kỳ sảng khoái, là một plugin Jquery phục vụ rất nhiều tính năng không chỉ tính năng tạo tag. Bên cạnh đó, đây cũng là một sản phẩm open source có lượng star trên Github rất là cao (trên 15k) nên chắc chắn đây là một lựa chọn rất tốt cho ai muốn tạo tag hay biến tấu select box bình dị của HTML

Cài đặt Select2

Cách đơn giản nhất đó là dùng thông qua CDN mà Select2 gợi ý

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

Hoặc cách khác là bạn download source về và cấu hình JS, CSS. Khi download về thì nhớ dùng bản dist để đảm bảo là phiên bản stable của Select2

Cách khác: Bạn có thể kết hợp Bower và Grunt để thực hiện tác vụ này.

Điều lợi của vấn đề này là: Bạn không phải làm tay việc copy/paste. Điều lợi lớn hơn nữa là bạn có thể update tự động version của Select2 khi Select2 có ra tính năng mới hay fix bug

- Cài đặt Select2 với bower

bower install select2 --save

- Cấu hình Grunt
Cấu hình để nối (concat) file JS

concat: {
  options: {
    separator: ';\n'
  },
  js_3rd_party: {
    src: [
      './bower_components/jquery/dist/jquery.js',
      './bower_components/bootstrap/dist/js/bootstrap.js',
      './bower_components/select2/dist/js/select2.min.js'
    ],
    dest: './js/3rd_party.js'
    }
}

Cầu hình để nối (compress) file CSS

cssmin: {
  compress: {
    files: {
      './css/main.min.css': [
        './bower_components/bootstrap/dist/css/bootstrap.css',
        './bower_components/select2/dist/css/select2.min.css'
      ]
    }
  }
}

Vậy là sau khi cài đặt xong, chỉ việc chạy grunt để nó thực hiện công đọan nối file JS, CSS lại giúp chúng ta.

Sử dụng Select2

Select2 sẽ thay thế cho Select box HTML, nên thao tác căn bản nhất đó là:

<script type="text/javascript">
  $('select').select2();
</script>

Thực hiện tạo tính năng tag. Khi thực hiện điều, các bạn lưu ý là phải dùng chế độ multi của select box, để cho phép user chọn được nhiều option. (User có thể đánh nhiều tag)

<select class="form-control" multiple="multiple" id="tags" name="tags[]">
    <option value="yahoo">yahoo</option>
    <option value="google">google</option>
    <option value="microsoft">microsoft</option>
</select>

Tiếp theo đó, bạn chỉ cần dùng Select2 đề khai báo đó là dạng đánh tag như sau (nên đặt đoạn code này vào khu vực document ready)

$("#tags").select2({tags: true,tokenSeparators: [',', ' ']});

Hiện tại, hệ thống embedslide đã triển khai tính năng đánh tag cho slide cũng bằng bộ library hấp dẫn này. Mọi người ghé thử xem sao. Có gì cứ việc đóng góp ý kiến thoải mái (https://www.facebook.com/coder.lang.thang/posts/532095633609233)