ahmadajah03 Tue Oct 2020 1 year ago

Contoh Tutorial Search Autocomplete pada Laravel 8

Di sini, saya akan menunjukkan search autocomplete laravel 8 dari database. Anda dapat memahami konsep ajax autocomplete textbox di laravel 8. Artikel ini membahas lebih detail tentang laravel 8 typeahead autocomplete ajax.

Saya menjelaskan secara sederhana tentang contoh autocomplete ajax laravel 8 typeahead. Anda hanya perlu beberapa langkah untuk melakukan contoh autocomplete laravel 8 jquery ajax.

Bootstrap Typeahead JS menyediakan cara antarmuka pengguna sehingga kita dapat dengan mudah menulis kode jquery ajax dan menjadikannya pencarian autocomplete dinamis di aplikasi laravel 8. kita dapat dengan mudah menggunakan Typeahead JS dengan bootstrap.

Jquery autocomplete adalah keharusan jika Anda berurusan dengan big data, seperti Anda memiliki tabel item atau produk dan ribuan record sehingga tidak memungkinkan untuk memberikan kotak drop-down, tetapi lebih baik jika kita menggunakan autocomplete daripada kotak pilih.

Ikuti langkah di bawah ini untuk membuat search autocomplete sederhana dengan aplikasi laravel 8.

Langkah 1: Unduh Laravel 8

pertama-tama kita perlu mendapatkan aplikasi Laravel 8 versi baru menggunakan perintah di bawah ini, Jadi buka terminal OR command prompt Anda dan jalankan perintah di bawah ini:

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

Langkah 2: Buat Migrasi dan Model

Pada langkah ini kita harus membuat migrasi untuk tabel item menggunakan perintah Laravel 8 php artisan, jadi jalankan perintah di bawah ini:

php artisan make:migration create_items_table

Setelah perintah ini, Anda akan menemukan satu file di jalur berikut "database/migrations" dan Anda harus meletakkan kode di bawah ini di file migrasi untuk membuat tabel items.

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
  
class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('items');
    }
}

Kemudian setelah itu, jalankan migrasi:

php artisan migrate

Setelah membuat tabel "items" Anda harus membuat model Item untuk item, jadi pertama buat file di jalur ini "app/Models/Item.php" dan letakkan konten di bawah ini di file item.php:

app/Models/Item.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Item extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name'
    ];
}

Langkah 3: Buat Route

Pada langkah ini kita perlu membuat rute untuk tampilan tampilan dan metode ajax. jadi buka file "routes/web.php" Anda dan tambahkan route berikut.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\SearchController;
  
/*
|--------------------------------------------------------------------------
| 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('search', [SearchController::class, 'index'])->name('search');
Route::get('autocomplete', [SearchController::class, 'autocomplete'])->name('autocomplete');

Langkah 4: Buat Controller

Pada langkah ini, kita harus membuat controller baru sebagai SearchController dan kita juga perlu menambahkan dua metode index() dan autocomplete() pada controller itu seperti yang Anda lihat di bawah ini:

app/Http/Controllers/SearchController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Item;
  
class SearchController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('search');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autocomplete(Request $request)
    {
        $data = Item::select("name")
                ->where("name","LIKE","%{$request->query}%")
                ->get();
   
        return response()->json($data);
    }
}

Langkah 5: Buat File View

Pada langkah terakhir, mari buat search.blade.php (resources/views/search.blade.php) untuk layout dan daftar semua kode item di sini dan letakkan kode berikut:

resources/views/search.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - Medikre.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
   
<div class="container">
  <h1>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - Medikre.com</h1>  
    <input class="typeahead form-control" type="text">
</div>
   
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>
   
</body>
</html>

Pastikan Anda memiliki beberapa data dummy pada tabel item Anda sebelum menjalankan contoh ini. Sekarang kami siap untuk menjalankan contoh kami jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah di browser Anda:

http://localhost:8000/search

Saya harap ini dapat membantu Anda ...

ajax search autocomplete search autocomplete laravel laravel 8 laravel