Opsi Muat melalui AJAX + Laravel – Panel Admin Cepat

Di QuickAdminPanel kami, kami membuat dropdown dengan perpustakaan jQuery Select2, yang memberikan kemampuan pencarian.

Namun bagaimana jika Anda memiliki 1.000+ atau lebih entri di dropdown tersebut?
Bahkan berpotensi membuat browser Anda crash saat memuat.

Cara yang lebih baik adalah memuat opsi yang dipilih hanya ketika pengguna mulai mencarinya, dan dropdown akan melengkapi nilainya secara otomatis. Itulah tepatnya yang akan kami bangun di artikel ini.

Kode jQuery default untuk mengubah reguler memilih ke Select2 adalah ini:

$(document).ready(function() {
    $('.select2-dropdown').select2();
});

Kemudian itu akan diterapkan ke tag apa pun dengan pilih kelas=”pilih2-dropdown”.

Sekarang, untuk memuat opsi melalui AJAX, kita perlu melakukan dua hal:

1. Tambahkan beberapa parameter ke .pilih2() panggilan, termasuk URL untuk sumber AJAX;
2. Buat titik akhir API yang akan dipanggil melalui AJAX itu, untuk mengembalikan data opsi;

---

Contoh proyek

Mari kita ambil contoh proyek – database kantor, di mana setiap kantor berlokasi di kota tertentu.
Dan kami memiliki 1.000 kota di database kami:

Sekarang, dalam formulir untuk membuat kantor, kami memiliki dropdown untuk kota:

Berikut kode HTML untuk dropdown itu:

<select name="city_id" id="city" class="form-control select2"></select>

Dan kode jQuery:

$(document).ready(function () {
  $('#city').select2();
})

Sekarang, mari kita ambil Contoh Select2 AJAX dan sesuaikan dengan skenario kita, kode jQuery yang diperbarui adalah seperti ini:

$(document).ready(function() {
    $('#city').select2({
        minimumInputLength: 3,
        ajax: {
            url: '{{ route("api.cities.search") }}',
            dataType: 'json',
        },
    });
});

Yang paling penting bagi kami adalah URL AJAX: rute(‘api.kota.pencarian’). Mari kita buat itu di file Laravel rute/api.php:

Route::get('api/v1/cities/search', 'Api\V1\Admin\CitiesApiController@search')
    ->name('api.cities.search');

Ini kode untuknya KotaApiController.php:

public function search(Request $request)
{
    $cities = City::where('name', 'LIKE', '%'.$request->input('term', '').'%')
        ->get(['id', 'name as text']);
    return ['results' => $cities];
}

Seperti yang Anda lihat, secara default, permintaan API disertakan ?istilah=xxxxdi mana xxxx adalah berapa pun yang Anda masukkan ke dalam kotak pencarian.

Dan hasilnya muncul sebagai “hasil” array JSON, dengan setiap hasil berisi kolom “id” dan “teks”, lihat format ini:

{
  "results": [
    {
      "id": 1,
      "text": "New Vanfort"
    },
    {
      "id": 8,
      "text": "New Iva"
    },
    {
      "id": 14,
      "text": "New Traceychester"
    }
  ]
}

Secara visual, Anda dapat memilih hasil seperti ini:

Selesai, browser Anda aman – nilai dropdown hanya akan dimuat ketika seseorang benar-benar mencarinya!