Cara Mudah Membuat Autocomplete Search Seperti Twitter di Laravel 8 dengan Typeahead.js

Cara Mudah Membuat Autocomplete Search Seperti Twitter di Laravel 8 dengan Typeahead.js

Admin
Admin・ 6 Juni 2021
6 min read ・ 6694 views

Laravel Autocomplete Search - Di artikel sebelumnya saya sudah membagikan artikel tentang bagaimana cara membuat live search di laravel menggunakan livewire, dan di artikel ini saya akan membagikan artikel yang akan membahas tentang bagaimana cara membuat autocomplete search seperti fitur pencarian twitter di laravel dengan menggunakan typeaheadjs library. Di percobaan ini nanti kita akan mulai dari nol yaitu dengan install laravel, membuat data dummy dengan factory, membuat route untuk pencarian, membuat tampilan dengan bootstrap dan lain-lain.

Baca: Cara Mudah Membuat Live Search dengan Laravel Livewire

Apa itu Typeahead.js ?

Typeahead.js merupakan javascript library dari twitter dan memang terinspirasi dari fungsi autocomplete search dari twitter.com. Typeahead.js library terdiri dari dua komponen yaitu suggestion engine, Bloodhound dan UI view, Typeahead. Suggestion engine bertanggung jawab untuk menghitung saran untuk query yang diberikan. UI view bertanggung jawab untuk memberikan saran dan menangani interaksi DOM. Kedua komponen tersebut dapat digunakan secara terpisah, tetapi ketika digunakan bersama, keduanya dapat memberikan "rich typeahead experience".

Mulai Membuat Autocomplete Search di Laravel

Baiklah, setelah mengetahui kita akan membuat mini project seperti apa pada tutorial ini, kemudian mengetahui apa itu typeahead, sekarang kita akan masuk ke koding.

Install Laravel

composer create-project laravel/laravel laravel-autocomplete-search

Buka terminal, lalu jalankan perintah seperti di atas untuk mulai menginstall laravel versi terbaru dengan nama laravel-autocomplete-search.

cd laravel-autocomplete-search

Jika proses installasi sudah selesai, lanjutkan dengan menjalankan perintah di atas untuk masuk ke direktori laravel project yang baru saja diinstall.

Buat Database

Kemudian kita perlu membuat database baru untuk menampung data-data user yang akan kita gunakan untuk sample autocomplete search nantinya. Disini saya memakai XAMPP sebagai local server, jadi saya akan membuat database baru dengan nama laravel-autocomplete-search di phpMyAdmin.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-autocomplete-search
DB_USERNAME=root
DB_PASSWORD=

Jika sudah membuat database, jangan lupa untuk menyesuaikan database configuration pada file .env seperti contoh di atas. Kemudian jalankan php artisan migrate.

Membuat Data Dummy dengan Factory

Selanjutnya kita akan membuat data dummy dengan factory. Untuk percobaan kali ini, kita bisa menggunakan UserFactory.php yang sudah disediakan default oleh laravel untuk nantinya kita bisa generate.

php artisan tinker
User::factory()->count(100)->create()

Masuk ke terminal lagi, jalankan perintah di atas secara berurutan. Dengan perintah tersebut, kita akan membuat dummy untuk tabel users dengan jumlah sebanyak 100 data user.

Tambah Route

Route::get('search', function (Request $request) {
        $query = $request->get('query');
        $filterResult = User::where('name', 'LIKE', '%'. $query. '%')->get();
        return response()->json($filterResult);
});

Kemudian kita harus membuat route baru yaitu search untuk memproses setiap ada inputan dari user pada form input di view. Jangan lupa juga untuk import use Illuminate\Http\Request; dan use App\Models\User;.

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Http\Request;
use App\Models\User;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('search', function (Request $request) {
        $query = $request->get('query');
        $filterResult = User::where('name', 'LIKE', '%'. $query. '%')->get();
        return response()->json($filterResult);
}); 

Sehingga secara keseluruhan, kode yang ada pada file routes/web.php akan seperti di atas.

Membuat Autocomplete Search View

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body class="pt-5">
    <div class="container">
        <div class="row">
            <div class="text-center">
                <h1>Autocomplete Search with Laravel 8</h1>
            </div>
        </div>
        <div class="row pt-3">
            <div class="input-group mb-3">
                <input type="text" id="search" name="search" class="form-control" placeholder="Search">
              </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
    <script type="text/javascript">
        var route = "{{ url('search') }}";

        $('#search').typeahead({
            source: function (query, process) {
                return $.get(route, {
                    query: query
                }, function (data) {
                    return process(data);
                });
            }
        });
    </script>   
  </body>
</html>

Silahkan copy seluruh kode di atas, lalu replace pada file welcome.blade.php. Disini kita akan membuat form input dengan name="search" sebagai parameter untuk melakukan pencarian di tabel user berdasarkan name. Dan kita juga menambahkan id="search" untuk menangkap setiap ada inputan pada form input yang kemudian dikirimkan route search menggunakan jquery typeahead.js.

Pengujian Autocomplete Search

Laravel Autocomplete Search

Setelah melewati proses mulai install laravel, membuat database, generate dummy data, membuat route baru untuk search, membuat tampilan baru dan sekarang waktunya pengujian. Silahkan buka laravel project kalian di browser, lalu oada form input silahkan coba ketikkan beberapa karakter huruf, maka akan muncul saran pencarain seperti gambar di atas. Oke sampai disini kita sudah berhasil membuat fitur autocomplete search di laravel dengan cepat dan mudah menggunakan typeahead.js.

Sekian artikel kali ini, jika ada kritik, saran atau apapun itu yang ingin didiskusikan, silahkan tulis komentar kalian pada form komentar yang sudah tersedia di bawah ini. See you.

 

Web illustrations by Storyset

Tinggalkan Komentar
Loading Comments