Cara Mudah Membuat Live Search dengan Laravel Livewire

Admin・ 2 Juni 2021

5 min read ・ 5509 views

Laravel Livewire Live Search - Melanjutkan artikel sebelumnya yang sudah terlebih dahulu saya publish, di artikel kali ini saya akan coba menjelaskan atau membagikan tulisan mengenai bagaimana cara membuat live search dengan laravel livewire. Apa itu live search ? live search merupakan fitur yang memungkinkan user melakukan pencarian data yang dia inginkan tanpa melakukan ENTER atau reload halaman. Dengan adanya fitur live search seperti ini secara user experience sangat bagus, karena dengan live search akan memberikan kemudahan bagi user atau mempercepat proses pencarian data.

Untuk membuat fitur live search bisa dengan menggunakan jQuery, Vanillajs atau yang lainnya. Namun, pada artikel kali ini saya akan memberikan contoh bagaimana cara membuat fitur live search secara cepat dan mudah dengan menggunakan query string dari laravel livewire. Dan di artikel ini, saya tidak akan memulainya dari nol karena saya akan melanjutkan projek yang sebelumnya sudah pernah saya buat dan bagikan.

Baca: Tutorial Membuat Load More on Scroll atau Infinite Scroll dengan Laravel Livewire

Mungkin artikel ini nanti akan sangat singkat sekali, berbeda dengan beberapa artikel yang pernah saya bagikan karena memang untuk membuat live search dengan laravel livewire sangatlah mudah.

Baiklah, mari kita langsung ke koding

<input class="form-control mb-3" type="text" wire:model="search" placeholder="Search" aria-label="search">

Kita akan membuat search form dengan menambahkan element input HTML menggunakan style dari bootstrap. Silahkan buka file yang terdapat di direktori resources/views/livewire/post-data.blade.php. Kemudian copy sebaris kode di atas dan paste di antara <div class="row"> dan @foreach ($posts as $post) . Jika kita perhatikan pada sebaris kode di atas, kode di atas bukanlah sekedar form input biasa, melainkan kita juga menyisipkan kode wire:model="search". Apa fungsi wire:model="search" ? kode tersebut berfungsi untuk menangkap string hasil dari inputan user saat melakukan pencarian data.

public $search;
protected $queryString = ['search'];

Kemudian kita akan menambahkan property baru pada class component PostData atau di file app/Http/livewire/PostData.php. Property yang pertama adalah public $search untuk data binding dan property yang kedua adalah protected $queryString = ['search]; yang berfungsi untuk menangkap string yang dikirimkan dari form input yang sudah kita kasih wire:model="search" di resources/views/livewire/post-index.blade.php.

public function render()
    {
        $posts = Post::latest()->paginate($this->limitPerPage);

        if ($this->search !== null) {
            $posts = Post::where('title','like', '%' . $this->search . '%')
            ->latest()->paginate($this->limitPerPage);
        }
        $this->emit('postStore');

        return view('livewire.post-data', ['posts' => $posts]);
    }

Kemudian pada bagian render kita tambahkan kondisi if seperti kode di atas. Maksud dari tambahan kode di atas adalah jika nilai search tidak sama dengan null atau terdapat nilai (inputan) maka akan menampilkan data post dimana data yang akan ditampilkan mempunyai title seperti nilai inputan di search form.

Oke sekarang kalau kita coba melakukan pencarian, fitur live search berfungsi dengan baik (tanpa reload halaman). Tapi di URL masih diikuti dengan ?search=quam dan ketika search form dikosongkah akan menyisakan ?search=. Hal seperti ini akan coba kita hilangkah agar terlihat rapi dan bersih. Untuk menghilangkah query string di URL, kita akan membuat perubahan sedikit pada file app/Http/livewire/PostData.php

protected $queryString = ['search'=> ['except' => '']];

Pada property protected $queryString = ['search']; kita ubah menjadi seperti kode di atas. Dengan kode di atas, jika query string kosong atau tidak terdapat nilai maka tidak akan ditampilkan pada URL.

@if ($posts->count() == 0)
    <div class="alert alert-danger" role="alert">
        Data not found!
    </div>
@endif

Kemudian agar lebih informatif, mari kita tambahkan alert jika saat melakukan pencarian ternyata data tidak ditemukan maka akan muncul alert dengan pasan Data not Found. Copy kode di atas lalu paste di file resources/views/livewire/post-data.blade.php atau lebih tepatnya tempatkan di bawah @endforeach.

PostData.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Post;

class PostData extends Component
{
    public $search;

    protected $queryString = ['search'=> ['except' => '']];
   
    public $limitPerPage = 10;

    protected $listeners = [
        'post-data' => 'postData'
    ];
   
    public function postData()
    {
        $this->limitPerPage = $this->limitPerPage + 6;
    }

    public function render()
    {
        $posts = Post::latest()->paginate($this->limitPerPage);

        if ($this->search !== null) {
            $posts = Post::where('title','like', '%' . $this->search . '%')
            ->latest()->paginate($this->limitPerPage);
        }
        $this->emit('postStore');

        return view('livewire.post-data', ['posts' => $posts]);
    }
}

Secara keseluruhan, kode pada file PostData.php sekarang akan nampak seperti kode diatas.

Sekian artikel yang cukup singkat ini, sampai disini kita sudah berhasil membuat fitur live search menggunakan laravel livewire. Dapat kita simpulkan bahwa pada latihan membuat atau menambahkan fitur live search pada projek latihan laravel livewire ini, kita lebih banyak koding pada class component PostData.php dengan menambahkan property public $search; diikuti dengan menambahkan property protected $queryString dan menambahkan kondisi if pada render. Pada view atau lebih tepatnya di file resources/views/livewire/post-data.blade.php kita hanya menambahkan form input yang disisipkan kode wire:model="search" untuk menangkap nilai atau inputan dan mengirimkannya ke class component PostData.php.

Jika ada saran, kritik atau apapun itu yang didiskusikan, silahkan tulis komentar teman-teman pada form komentar yang tersedia di bawah ini. Dan juga jika teman-teman punya cara lain untuk membuat fitur live search dengan laravel livewire, boleh di share juga pada form komentar. See you

Web illustrations by Storyset