[SELECT2] Sử dụng Select2 để thay thế select boxes

https://viblo.asia/p/su-dung-select2-de-thay-the-select-boxes-3OEqGjlpR9bL

Select2 là công cụ khá tốt để tùy biến select box, nó hỗ trợ việc tìm kiếm, tagging, lấy dữ liệu từ nguồn khác ... Để sử dụng Select2, bạn cần chèn file JavaScript và CSS của nó vào trang web của bạn. Bạn có thể tải chúng về từ đây https://github.com/select2/select2/tags , copy vào thư mục dist và include chúng vào thẻ <head> trên trang HTML của bạn.

<link href="path/to/select2.min.css" rel="stylesheet" /> <br>
<script src="path/to/select2.min.js"></script>

Hoặc có thể sử dụ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ũng có thể sử dụng nó như 1 gem với Ruby on Railshttps://github.com/argerim/select2-rails Để khởi tạo một select2 cho riêng bạn :

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

Một số tính năng hay dùng với Select2

Cơ bản

$(document).ready(function() {
  $(".js-example-basic-single").select2();
  // Thêm các tùy chọn của bạn vào đây.
});

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Placeholders

$(".js-example-placeholder-single").select2({
  placeholder: "Select a state",
  allowClear: true
});

Hiển thị nút xóa các giá trị đã chọn

$(".js-example-clear").select2({
  allowClear: true
});

Đọc dữ liệu từ một mảng

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$(".js-example-data-array").select2({
  data: data
})

Đọc dữ liệu từ nguồn khác sử dụng AJAX

ajax: {
  url: "/contacts",
  dataType: "json",
  delay: 200,
  data: function (params) {
    return {
      search: params.term
    };
  },
  processResults: function (data) {
    return {
      results: data
    };
  },
  cache: true
}

Disabled mode

$(".js-example-disabled").prop("disabled", false);

Ẩn ô tìm kiếm

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

Bắt các sự kiện

var $eventSelect = $(".js-example-events");

$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
$eventSelect.on("select2:select", function (e) { log("select2:select", e); });
$eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); });

Chế độ thẻ Tagging

$(".js-example-tags").select2({
  tags: true
})

Automatic tokenization

$(".js-example-tokenizer").select2({
  tags: true,
  tokenSeparators: [',', ' ']
})

Hỗ trợ đã ngôn ngữ

$(".js-example-language").select2({
  language: "es"
});

Căn lề về bên phải

$(".js-example-rtl").select2({
  dir: "rtl"
});

Còn rất nhiều khả năng mà Select2 có thể làm, bạn có thể tham khảo thêm tại https://select2.github.io/

Nguồn

https://select2.github.io/

PreviousĐoạn code check lỗi PHP trong Ajax NextMột cách sử dụng lazyload khi addclass thật khó khăn...

Last updated 6 years ago

hashtagMột số tính năng hay dùng với Select2

hashtagCơ bản

hashtagPlaceholders

hashtagHiển thị nút xóa các giá trị đã chọn

hashtagĐọc dữ liệu từ một mảng

hashtagĐọc dữ liệu từ nguồn khác sử dụng AJAX

hashtagDisabled mode

hashtagẨn ô tìm kiếm

hashtagBắt các sự kiện

hashtagChế độ thẻ Tagging

hashtagAutomatic tokenization

hashtagHỗ trợ đã ngôn ngữ

hashtagCăn lề về bên phải

hashtagCòn rất nhiều khả năng mà Select2 có thể làm, bạn có thể tham khảo thêm tại https://select2.github.io/arrow-up-right

hashtagNguồn