Đã đăng vào thg 11 29, 2015 6:55 SA 2 phút đọc

3.7K

TÌm hiểu Select2

Bài đăng này đã không được cập nhật trong 8 năm

_Giới thiệu sơ về Select2 - đây là một plugin Jquery hỗ trợ trong việc tuỳ chỉnh select box, tìm kiếm dữ liệu trong khi select, tạo tag, điều khiển dữ liệu, và thêm một số tính năng khác. _

Cài đặt Select2:

Đơn giản nhất đó là dùng thông qua CDN:

<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ó thể download source Select2 về máy theo link: https://github.com/select2/select2/tags, dùng bản dist. Sau đó là chèn đoạn code sau vào bên trong thẻ <head>:

<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>

Sau đó chèn thêm đoạn script sau:

<script>
  $(document).ready(function() {
    $(".select2").select2({
       ...
    });
  });
</script>

Các tính năng cơ bản của select2

1. Singer select boxes

Là kiểu được lựa chọn đơn, chỉ được lựa chọn duy nhất một option.

$(document).ready(function() {
  $(".select2").select2();
});

<select class="select2">
  <option value="1">One</option>
    ...
  <option value="10">Ten</option>
</select>

2. Multiple select boxes

Để lựa chọn được nhiều option, cần thêm thuộc tính multiple vào thẻ <select>.

$(document).ready(function() {
  $(".select2").select2();
});

<select class="select2" multiple="multiple">
  <option value="1">One</option>
    ...
  <option value="10">Ten</option>
</select>

3. placeholder

Để hiển thị placeholder ta thêm thuộc tính placeholder vào đoạn script:

$(".select2").select2({
  placeholder: "Select a number"
});

4. allowClear

Để thêm button xoá các giá trị đã chọn ta thêm thuộc tính allowClear:

$(".select2").select2({
  placeholder: "Select a number",
  allowClear: true
});

5. Loading array data

Select2 cung cấp một phương thức tải dữ liệu từ local. Bạn có thể khởi tạo các dữ liệu cho selections

var data = [{ id: 1, text: 'One' }, { id: 2, text: 'Two' }, { id: 3, text: 'Three' }];

$(".select2").select2({
  data: data
})

Thiết lập giá trị mặc định ban đầu trên HTML như bình thường:

<select class="select2">
  <option value="2" selected="selected">Two</option>
</select>

6. Loading remote data

Sử dụng Ajax để tải dữ liệu từ một nguồn khác:

$(".select2").select2({
  ajax: {
    url: "/numbers",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term
      };
    },
    processResults: function (data) {
      return {
        results: data
        }
      };
    },
    cache: true
  },
});

7. Disabled mode

Disable hành động select của select box:

$(".select2").on("click", function () {
  $(".select2").prop("disabled", true);
});

Enable hành động select của select box:

$(".select2").on("click", function () {
  $(".select2").prop("disabled", false);
});

8. Disabled results

Disable một option trong select box:

<select class="select2">
  <option value="1">One</option>
  <option value="2" disabled="disabled">Two</option>
  <option value="3">Three</option>
</select>

9. Limiting the number of selections

maximumSelectionLength: Giới hạn số lượng lựa chọn

$(".select2").select2({
  maximumSelectionLength: 2
  // chỉ được chọn nhiều nhất 2 option
});

10. Hiding the search box

Ẩn hộp tìm kiếm:

$(".select2").select2({
  minimumResultsForSearch: Infinity
});

11. Tagging support

Select2 hỗ trợ thêm việc lựa chọn tự động ngay khi người dùng đang viết vào ô tìm kiếm.

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

Ngoài ra Select2 còn hỗ trợ nhiều tính năng khác như đa ngôn ngữ, giao điện, căn lề, bắt các sự kiện đóng mở select box, ...

** Tài liệu tham khảo:** https://select2.github.io/

Ruby Ruby on Rails

Các tính năng cơ bản của select2

Mục lục