Pencarian Autocomplete di Laravel Menggunakan Ajax

Anugrah Sandi 3 November 2017

Pencarian Autocomplete di Laravel Menggunakan Ajax

Pada kesempatan kali ini kita akan belajar bersama bagimana membuat fitur pencarian menggunakan ajax pada select2 dengan mode autocomplete. Kenapa menggunakan autcomplete? karena terkadang kita memiliki jumlah data yang sangat banyak dari sebuah table seperti produk, user, dll, sehingga tidak memungkinkan untuk diload sekaligus dalam select box. Sebelum memulai akan kita jabarkan terlebih dahulu poin apa saja yang akan dicapai dalam tutorial kali ini:

  1. Membuat sample data pencarian
  2. Menggunakan select2 & ajax

Baca Juga: Menggunakan Response & View Laravel

### Membuat sample data pencarian

Sebelum membuat fitur pencarian tentunya kita harus memiliki sample data yang dapat dicari nantinya. Kita akan memulai dari awal dengan Laravel yang masih fresh install, jadi install Laravel terlebih dahulu dengan command berikut:

composer create-project --prefer-dist laravel/laravel autocomplete

Setelah proses instalasi selesai, buat database terlebih dahulu kemudian lakukan konfigurasi database. Buka file .env kemudian sesuaikan informasi database anda:

DB_DATABASE=codepolitan
DB_USERNAME=root
DB_PASSWORD=toor

Secara default telah terdapat migration user beserta modelnya, maka kita akan memanfaatkan table tersebut dengan membuat data dummy. Buat file seeder dengan command:

php artisan make:seeder UsersTableSeeder

File seeder yang telah dibuat akan diletakan di direktori database/seeds. Buka file UsersTableSeeder.php kemudian tambahkan code berikut didalam method run:

factory(\App\User::class, 100)->create();

Tidak ketinggalan, buka file DatabaseSeeder.php kemudian hilangkan tanda // didalam method run, sehingga akan menjadi seperti ini:

public function run()
{
   $this->call(UsersTableSeeder::class);
}

Kemudian jalankan command:

php artisan migrate --seed
Image
php artisan make:controller Select2Controller

Buka file Select2Controller.php yang terletak di app/Http/Controllers, kemudian tambahkan code berikut sehingga menjadi seperti ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class Select2Controller extends Controller
{
    public function index()
    {
    	return view('index');
    }

    public function loadData(Request $request)
    {
    	if ($request->has('q')) {
    		$cari = $request->q;
    		$data = DB::table('users')->select('id', 'email')->where('email', 'LIKE', '%$cari%')->get();
    		return response()->json($data);
    	}
    }
}

Baca Juga: Method Route Baru di Laravel

Menggunakan Select2 & Ajax

Menampilkan data menggunakan select2 sekaligus memanfaatkan fiturnya untuk melakukan pencarian adalah langkah terakhir yang akan kita lakukan. Buat file view dengan nama index.blade.php kemudian letakkan kedalam direktori resources/views:

<html lang="en">
  <head>
    <title>Pencarian Autocomplete di Laravel Menggunakan Ajax</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
  </head>
<body>

<div class="container">
  <h2>Pencarian Autocomplete di Laravel Menggunakan Ajax</h2>
  <br/>
  <select class="cari form-control" style="width:500px;" name="cari"></select>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
  $('.cari').select2({
    placeholder: 'Cari...',
    ajax: {
      url: '/cari',
      dataType: 'json',
      delay: 250,
      processResults: function (data) {
        return {
          results:  $.map(data, function (item) {
            return {
              text: item.email,
              id: item.id
            }
          })
        };
      },
      cache: true
    }
  });

</script>
</body>
</html>

Kemudian buat route, buka file web.php yang terletak didalam folder routes:

Route::get('/', 'Select2Controller@index');
Route::get('/cari', 'Select2Controller@loadData');

Terakhir jalankan command:

php artisan serve

Kemudian akses di browser anda : localhost:8000 atau jika tidak menggunakan artisan serve, akses: localhost/autocomplete/public. Kemudian masukkan kata kunci yang ingin anda cari, jika data tersebut tersedia maka secara otomatis akan menampilkan hasil sesuai kata kunci yang anda masukkan. Fitur pencarian dengan menggunakan select2 dan ajax di Laravel sudah bisa digunakan. Fitur ini dapat anda manfaatkan sesuai kebutuhan. Semoga bermanfaat.

Tags
laravelphpjqueryajaxTutorialautocomplete
Share to
FacebookTwitterLinkedIn