Live Search Users Laravel dan Vue.js

Belum puas juga mengikuti tutorial hingga saat ini, tentu membuat live search menjadi kebutuhan agar proses pencarian data tidak perlu melakukan penyegaran halaman. Jika membuat live search itu benar-benar mudah, kalau sudah menggunakan kerangka kerja Laravel dan Vue.js atau menggunakan kerangka kerja yang Anda sukai.

Daftar isi:

Menambahkan bidang pencarian

Setiap kali ingin membuat sistem pencarian Anda pasti membutuhkan bidang untuk menginput atau memasukan data yang dicari. Tidak seperti biasanya kalau bidang ini tidak membutuhkan tag <form>, dari sinilah saya menyukai Vue.js yang tidak terlalu ribet. Saatnya buka berkas index.vue pada direktori users, salin dan tempelkan dibagian bawah tag <hr>.

<div class="field is-grouped-multiline is-grouped">
    <div class="control">
        <input v-model="search" type="search" class="input" placeholder="Cari nama pengguna">
    </div>
</div>

Lebih jelasnya silakan lihat gambar berikut:

gambar 1

Menambahkan skrip

Sekarang lakukan beberapa konfigurasi pada bagian skrip dibawah ini pada berkas index.vue. Jika Anda bingung bagaimana maksud skrip dibawah ini, Anda bisa melihat langsung pada repositori berkas index.vue disitu Anda bisa melihat bentuk skrip sebenarnya.

<script>
...
import debounce from 'lodash/debounce'

export default {

    data() {
        return {
            ...

            search: ''
        }
    },
    
    ...

    methods: {
        fetchData() {
            axios.get('/api/users', {
                params: {
                    search: this.search
                }
            })

            ...
        },

        ...
    },

    watch: {
        search: debounce( function() {
            this.fetchData()
        }, 500)
    }
}
</script>

Lihat gambar berikut:

gambar 2 gambar 3

Bagaimana cara kerjanya?

  1. Variabel search secara bawaan akan kosong yang membuat semua data pengguna di keluarkan,
  2. Alih-alih Anda memasukan nama pengguna yang ingin dicari,
  3. Properti watch pun melihat variabel search memiliki respon dan kemudian fungsi debounce() akan memproses berapa lama waktunya akan diproses baik setiap saat atau sudah ditentukan, dan
  4. Ternyata memiliki waktu sebanyak 0,5 detik baru akan memanggil fungsi fetchData() untuk melakukan perubahan data pengguna berdasarkan pencarian, dan
  5. Setelah itu berhasilah.

Catatan: Jadi jika Anda sedang mengetik lalu berhenti lebih dari 0,5 detik atau 500 milidetik, maka fungsi fetchData() dipanggil dan melakukan permintaan berdasarkan parameter search apa yang dicari.

Modifikasi fungsi index()

Jangan berhenti sebelum melakukan perubahan skrip pada berkas UserController.php, silakan lakukan perubahan skrip sebelumnya menjadi seperti dibawah ini pada fungsi index().

public function index()
{
    if (request('search')) {
        $users = User::where('name', 'like', '%'. request('search') .'%')->get();
    } else {
        $users = User::all();
    }

    return response()->json($users);
}

Mungkin sebagian diantara Anda sudah mengerti bagaimana fungsi skrip diatas. Jika Anda pernah belajar Structured Query Language atau sebagian orang mengatakan Query, maka tidak heran untuk lebih mengerti.

Cara prosesnya seperti ini

Jika variavel search (sebenarnya itu parameter search) ada maka akan mencari data pengguna berdasarkan nama, kalau tidak maka akan menampilkan semua data pengguna.

Sebagai bonus jika Anda ingin mencari berdasarkan alamat email pengguna juga, bisa malakukan perubahan seperti skrip dibawah ini.

User::where('name', 'like', '%'. request('search') .'%')
    ->where('email', 'like', '%'. request('search') .'%')
    ->get();

Berikut hasil yang Anda akan dapatkan:

gambar 4

Sekarang cobalah apakah tutorial ini benar-benar berhasil dan selamat mencoba.