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

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
Table of Contents
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
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
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 67046 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 32220 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 31779 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28528 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27859 views