Select2 Plugin - How to use select2 with ajax
Bài đăng này đã không được cập nhật trong 2 năm
1. Khi nào sử dụng select2?
- Select2 cung cấp cho người lập trình các tùy chọn có thể tạo ra một select box, searching, tagging...với nhiều chức năng rất tiện lợi cho người sử dụng.
Điển hình của việc sử dụng select2 là trong những trường hợp bạn muốn gợi ý cho người dùng các dữ liệu có sẵn trong cơ sở dữ liệu theo từ khóa mà người dùng nhập vào.
Ví dụ như trong ô tìm kiếm của Lazada:
2. Select2 - ajax.
Install
Select2 Thêm mã sau vào phần <head></head> của trang web.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
Basic usage
- View
<select class="js-example-basic-single" name="state" style="width:300px;">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
- Javascript
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
Sử dụng select2 với dữ liệu từ database
- Trong trường hợp đơn giản nhất là bạn có thể Select all data từ cơ sở dữ liệu rồi đổ ra view. Cách này thường dùng trong những trường hợp như: tạo một select box với một số ít <option></option> đi theo.
- Tuy nhiên trong trường hợp dữ liệu có liên quan tới vấn đề mà người sử dụng đang tìm kiếm trả về là quá nhiều có thể khoảng vài nghìn record thì ta cần sử dụng ajax cùng với select2 để có thể giảm số lượng record lại theo chính xác những gì người dùng mong muốn.
Ý tưởng: Kết hợp select2 và ajax lấy keyword mà người sử dụng nhập vào (tối thiểu 3 ký tự) dùng để lấy dữ liệu từ database theo điều kiện LIKE. Sau đó gửi request với data là keyword đó tới controller để thực hiện lấy dữ liệu.Tại controller sẽ response lại data đã lấy được từ CSDL dưới dạng json. The Select2 data format
- Javascript
$(document).ready(function () {
$('.your-selecter').select2({
minimumInputLength: 3,
ajax: {
url: 'url_request',
type: 'POST',
dataType: 'json',
data: function (params) {
return {
keyWord: params.term
};
},
processResults: function (data, params) {
return {
results: $.map(data, function (item) {
return {
text: item.content,
id: item.id,
data: item
};
})
};
}
}
});
});
minimumInputLength: 3 // Cài đặt tối thiểu sau 3 kí tự cho đầu vào. Với dữ liệu quá lớn nếu không giới hạn số ký tự tối thiểu thì số lượng bản ghi trả về sẽ là rất nhiều. params.term // Từ khóa mà người dùng nhập vào ô <input></input> của select2. keyWord // POST data text // option's text. id // option value.
All rights reserved
