Tìm hiểu về select2

Select option html thì không quá xa lạ gì với dân viết web, tuy nhiên nó không có nhiều cái hay ho như select2 mà chúng ta sẽ cùng tìm hiểu dưới đây.

Select2 là gì

html select giúp chúng ta nhập liệu trên website với danh sách có sẵn để bạn lựa chọn. Tuy nhiên select html không được đẹp và có nhiều thứ không làm được và plugin select2 giúp bù đắp cho những thiếu sót mà html select đang tồn tại.

Select2 làm được những gì

Nếu bạn muốn làm select html đơn điệu trở lên cool ngầu hơn thì select2 sẽ giúp bạn, danh sách của bạn trông tinh tế hơn khi bạn có thanh cuộn trong danh sách option ngắn gọn của select. Bạn có ô tìm kiếm để bấm tìm kiếm option một cách nhanh chóng thay vì kéo chọn.

Ngoài những thứ trên bạn còn có thể kết hợp giữa select2 và ajax lấy danh sách từ json mà không cần phải hiện tất cả danh sách option. Chúng chỉ xuất hiện khi chúng ta gõ từ khoá tìm kiếm trong ô tìm kiếm của select2.

Thiết lập selected cho option trong select2

Để thiết lập attribute selected cho option có sẵn trong select bằng javascript thì khá đơn giản, bạn có thể sử dụng đoạn script bên dưới.

$('#inputPhone option[value="' + data.customer_show[0].identity + '"]').prop("selected", true);

Tuy nhiên với select2 thì nhiêu đó là chưa đủ mà bạn phải cần thêm một đoạn code nữa để nó có thể hiển thị selected ra ô select box.

$('#inputPhone').val(data.customer_show[0].phone).trigger("change");

Kết hợp select2 và ajax

Như đã nói ở trên nếu bạn muốn có một danh sách để người dùng lựa chọn nhập liệu nhưng không muốn chúng hiển thị đầy đủ ra ở ô select mà chỉ hiện ra khi người dùng gõ chữ vào ô tìm kiếm. Thì bạn có thể kết hợp select2 và ajax để tạo ra điều đó.

Cùng tìm hiểu cách tạo một danh sách select ẩn trong laravel ở ví dụ dưới đây.

Đầu tiên là tạo select html như dưới và nhớ sử dụng class select2 hoặc select2bs4 trong hmtl của bạn.

<select name="inputPhone" id="inputPhone" class="form-control select2bs4" style="width: 100%;">
        <option value="">Select</option>
        @foreach($customers_phones as $item)
                <option value="{{ $item->id }}">{{ $item->phone }}</option>
        @endforeach
</select>

Trong controller của laravel chúng ta gọi dữ liệu từ bảng dữ liệu và trả dữ liệu về dưới dạng json để có thể sử dụng cho ajax trong javascript

public function index(Request $request)
{
        if($request->has('q')){
            $search = $request->q;
            $identitys_search =DB::table('tbl_customers_identitys')->select("id","type","fullname")
                    ->where('fullname', 'LIKE', "%$search%")
                    ->get();
            return response()->json([
                'identitys_search' => $identitys_search
            ]);
        }
}

Sau khi đã có dữ liệu trả về từ controller chúng ta sẽ sử dụng ajax để có thể giúp hiển thị option khi bạn bấm từ cần tìm vào.

//show phonelist for select2
$('#inputModalPhone').select2({
        minimumInputLength: 3,
        minimumResultsForSearch: Infinity,
        ajax: {
                url: '{{ route("phones.index") }}',
                dataType: 'json',
                delay: 250,
                method: "get",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: function (data) {
                    return {
                        q: data.term // search term
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data.phones_search, function (item) {
                            return {
                                id: item.id,
                                text: item.phone,
                            }
                        })
                    };
                },
                cache: true
            }, 
            escapeMarkup: function (markup) { return markup; }, 
});

Trong đoạn ajax trên các bạn cần để ý vào đoạn code minimumInputLength: 3, Sở dĩ chúng ta cần thiết lập giá trị ở đoạn code này bởi vì nếu danh sách dữ liệu của bạn lớn thì chúng sẽ hiển thị ra rất nhiều khi bạn thiết lập giá trị càng thấp.

Và cuối cùng đừng quên thư viện và css của select2 nhé

<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>

Một số lưu ý khi dùng select2

Nếu dùng select2 trên modal thì bạn cần phải xoá bỏ tabindex="-1" khỏi modal. Vì nếu bạn không loại bỏ tabindex thì bạn không thể search trong ô select.