Membuat box search Select2 di Dalam Request AXIOS

Secara default select2 ditampilkan dengan tampilan select option biasa tarik turun atas/bawah. Anda bisa melihat contoh kode/demonya di jeesite sehingga dalam kasus tertentu jika pilihan slect optionnya terlalu banyak, maka akan cukup merepotkan, oleh karena itu jika saja ditambahkan semacam pencarian atau box search didalamnya, maka akan memudahkan user pada saat memilih data yang diinginkannya.

Selanjutnya disini bagaimana jika select2 tersebut berada didalam request Axios ?

Membuat box search Select2 di Dalam Request AXIOS

Misalnya Anda memiliki request http dengan method get untuk mendapatkan option data payment status didalam database seperti berikut :



        axios({
            method: 'get',
            url: '{{ url('api/admin/admin-manager/select2-payment-status') }}',
            headers: {
                Authorization: `Bearer ${getItems('token')}`,
                Accept: 'application/json',
            },
        }).then((res) => {
            const { payment_status } = res.data;

            renderSelect2('#add-form-invoices select[name=payment_status_id]', {
                data: payment_status,
                minimumResultsForSearch: Infinity,
                dropdownAutoWidth: true,
                width: '100%',
                containerCssClass: 'payment-status-field',
            })

        }).catch((err) => {
            handleErrorResponse(err.response);
        });

Maka Anda perlu menambahkan baris $(".search").select2({ width: '100%' }) didalam res datanya sehingga kode akan terlihat seperti berikut :


 axios({
            method: 'get',
            url: '{{ url('api/admin/admin-manager/select2-payment-status') }}',
            headers: {
                Authorization: `Bearer ${getItems('token')}`,
                Accept: 'application/json',
            },
        }).then((res) => {
            const { payment_status } = res.data;

            renderSelect2('#add-form-invoices select[name=payment_status_id]', {
                data: payment_status,
                minimumResultsForSearch: Infinity,
                dropdownAutoWidth: true,
                width: '100%',
                containerCssClass: 'payment-status-field',
            })
            $(".search").select2({ width: '100%' });

        }).catch((err) => {
            handleErrorResponse(err.response);
        });

Terakhir didalam class select2 Anda tinggal memanggil class search yang sudah didefinisikan didalam axios

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Membuat box search Select2 di Dalam Request AXIOS

0 Response to "Membuat box search Select2 di Dalam Request AXIOS"

Post a Comment