12/08/2018, 13:02
TÌm hiểu Select2
_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 = " ...
_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>
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, ...
**
