Hari ini, saya akan memberi tahu Anda contoh laravel 7 pencarian autocomplete dari database. mari kita bahas tentang ajax autocomplete textbox di laravel 7 menggunakan jquery. Anda dapat memahami konsep bootstrap typeahead autocomplete ajax laravel 7. Posting ini akan memberi Anda contoh sederhana laravel 7 typeahead ajax autocomplete contoh. Baiklah, mari selami langkah-langkahnya.

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

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

Ikuti langkah-langkah di bawah ini untuk membuat pencarian autocomplete sederhana dengan aplikasi laravel 7.

Langkah 1: Unduh Laravel 7

pertama-tama kita perlu mendapatkan aplikasi versi Laravel 7 baru menggunakan perintah di bawah ini, Jadi buka terminal ATAU 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 artara Laravel 7 php, jadi pertama 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 Anda untuk membuat tabel item.

<?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 "item" Anda harus membuat model Item untuk item, jadi pertama-tama buat file di jalur ini "app/Item.php" dan letakkan konten di bawah ini di file item.php:

app/Item.php

<?php
  
namespace App;
   
use Illuminate\Database\Eloquent\Model;
  
class Item extends Model
{
       
}|

Langkah 3: Buat Route

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

route/web.php

Route::get('search', 'SearchController@index')->name('search');
Route::get('autocomplete', 'SearchController@autocomplete')->name('autocomplete');

Langkah 4: Buat Controller

Pada langkah ini, kita harus membuat controller baru sebagai SearchController dan kita juga perlu menambahkan dua metode indeks () 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\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 kita buat search.blade.php (resources/views/search.blade.php) untuk tata letak dan daftar semua kode item di sini dan masukkan kode berikut:

resources/views/search.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.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 7 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 di tabel item Anda sebelum menjalankan contoh ini. Sekarang kita siap untuk menjalankan contoh kita jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah ini di browser Anda:

http://localhost:8000/search