Cara Membuat Autofield dan Autocomplete Menggunakan Laravel dan Ajax

Halo semuanya, kali ini aku ingin berbagi untuk membuat autofield dan autocomplete menggunakan laravel dan ajax. Autocomplete adalah jika kita mengetikan beberapa kata pada suatu inputan atau field akan muncul sugest yang mungkin itu adalah keyword yang temen-temen cari atau bisa dilihat seperti google search, biasanya kan temen-temen kalo mau cari sesuatu di google akan muncul sugest nah jadi seperti itu.

Sedangkan autofiled jika field yang pertama sudah diisi maka field yang diberikan autofield akan otomatis terisi sesuai inputan yang pertama. Penggunaan ini biasanya digunakan dalam hal untuk mencari alamat, misal jika kita mengisi field pertama tentang kecamatan, maka otomatis field kabupaten dan provinsi akan otomatis terisi. Akan tetapi dalam hal ini aku memberikan contoh kasus yg berbeda contohnya seperti dibawah ini.

Database

Untuk kasus dibawah ini merupakan request dari temen saya yang sedang skripsi namanya Asti Cahyani, struktur database dibuat olehnya, kira-kira bentuknya seperti ini.

Data Pasien

data pasien

Data Kecamatan

data kecamatan

Data Faskes

data faskes

Requirement

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

Source Code

Sebelumnya temen-temen buat database terserah apapun namanya ya.

Controller

app/Http/Controllers/AutoController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class JajanController extends Controller
{
    public function index()
    {
        $data_pasien = DB::table('data_pasien')->get();

        return view('welcome')->with([
            'data_pasien' => $data_pasien
        ]);
    }

    public function data_pasien(Request $request)
    {
        $search = $request->cari;

        $data_pasien = DB::table('data_pasien')
                            ->join('data_faskes', 'data_faskes.id', '=', 'data_pasien.id_faskes')
                            ->join('data_kecamatan', 'data_kecamatan.id', '=', 'data_pasien.id_kecamatan')
                            ->select('data_pasien.id','data_pasien.nama_pasien', 'data_faskes.nama_faskes', 'data_kecamatan.nama_kecamatan')
                            ->limit(5);

        $search = !empty($request->cari) ? ($request->cari) : ('');

        if($search){
           $data_pasien->where('data_pasien.nama_pasien', 'like', '%' .$search . '%');
        }

        $data = $data_pasien->limit(5)->get();
  
        $response = array();
        foreach($data as $pasien){
           $response[] = array(
               "value" => $pasien->id,
               "label" => $pasien->nama_pasien,
               "faskes" => $pasien->nama_faskes,
               "kecamatan" => $pasien->nama_kecamatan
            );
        }
        return response()->json($response);
    }
}

View

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <!-- Styles -->
</head>
<body>
    <div id="app">
        <div class="container">
            <main class="py-4">
                <div class="form-group mt-10">
                    <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Nama Pasien') }}</label>
                    <div class="col-md-6">
                        <input type="text" id='pasien' class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Puskesmas') }}</label>
                    <div class="col-md-6">
                        <input type="text" id='puskesmas' class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Kecamatan') }}</label>
                    <div class="col-md-6">
                        <input type="text" id='kecamatan' class="form-control">
                    </div>
                </div>
                @yield('content')
            </main>
        </div>
    </div>
</body>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        $(document).ready(function(){
            $( "#pasien" ).autocomplete({
                source: function( request, response ) {
                    console.log(request.term)
                $.ajax({
                    url:"{{route('pasien')}}",
                    type: 'post',
                    dataType: "json",
                    data: {
                        _token: CSRF_TOKEN,
                        cari: request.term
                    },
                    success: function( data ) {
                    response( data );
                    }
                });
                },
                select: function (event, ui) {
                $('#pasien').val(ui.item.label);
                $('#puskesmas').val(ui.item.faskes);
                $('#kecamatan').val(ui.item.kecamatan);
                return false;
                }
            });
        });
  </script>
</html>

Route

Untuk routenya terserah temen-temen mau di buatnya seperti apa.

routes/web.php

Up next