DEV Community

Cover image for Menggunakan Select2 Ajax Depends di Laravel
Iman Sugirman
Iman Sugirman

Posted on

Menggunakan Select2 Ajax Depends di Laravel

Implementasi Select2 dengan Laravel

Bidang select2_from_ajax dan select2_from_ajax_multiple memungkinkan Anda untuk menyaring hasil dari select2, tergantung pada apa yang telah dipilih dalam formulir. Katakanlah Anda harus memilih2 bidang. Ketika panggilan AJAX dibuat ke bidang kedua, semua variabel lain di halaman juga bisa lewat - itu berarti Anda dapat memfilter hasil dari select2 kedua.

Katakanlah Anda ingin menunjukkan dua pilihan:

  • Yang pertama menunjukkan Categories
  • yang kedua menunjukkan Artikel, tetapi hanya dari kategori di atas

Di CrudController Anda, Anda akan melakukan:

<?php


$this->crud->addField([    // SELECT2
            'label'         => Category',
            'type'          => 'select',
            'name'          => ‘category',
            'entity'        => 'category',
            'attribute'     => 'name',
        ]);

        $this->crud->addField([ // select2_from_ajax: 1-n relationship
            'label'                => "Article", // Table column heading
            'type'                 => 'select2_from_ajax_multiple',
            'name'                 => 'articles', // the column that contains the ID of that connected entity;
            'entity'               => 'article', // the method that defines the relationship in your Model
            'attribute'            => 'title', // foreign key attribute that is shown to user
            'data_source'          => url('api/article'), // url to controller search function (with /{id} should return model)
            'placeholder'          => 'Select an article', // placeholder for the select
            'minimum_input_length' => 0, // minimum characters to type before querying results
            'dependencies'         => [category], // when a dependency changes, this select2 is reset to null
            // ‘method'                    => ‘GET’, // optional - HTTP method to use for the AJAX call (GET, POST)
        ]);
Enter fullscreen mode Exit fullscreen mode

Buat API Controller untuk Category dan Route dibuat seperti ini :


Route::get('api/article', 'App\Http\Controllers\Api\ArticleController@index');
Route::get('api/article/{id}', 'App\Http\Controllers\Api\ArticleController@show);

Enter fullscreen mode Exit fullscreen mode

Maka controller itu akan terlihat seperti ini:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Backpack\NewsCRUD\app\Models\Article;
use Illuminate\Http\Request;

class ArticleController extends Controller
{
    public function index(Request $request)
    {
        $search_term = $request->input('q');
        $form = collect($request->input('form'))->pluck('value', 'name');

        $options = Article::query();

        // if no category has been selected, show no options
        if (! $form['category']) {
            return [];
        }

        // if a category has been selected, only show articles in that category
        if ($form['category']) {
            $options = $options->where('category_id', $form['category']);
        }

        if ($search_term) {
            $results = $options->where('title', 'LIKE', '%'.$search_term.'%')->paginate(10);
        } else {
            $results = $options->paginate(10);
        }

        return $options->paginate(10);
    }

    public function show($id)
    {
        return Article::find($id);
    }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)