CODEWITHSUNDEEP
laraveljquery-select2
Charlotte
Charlotte

Reputation: 25

Multi select with select2 and ajax laravel resource

For my series form, I need to have all the actors ready for a selection. I have a lot of actors and I need to get them with an api.

I made a Actor Resource :

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class ActorResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
       // return parent::toArray($request);
       
       return [
        'id'=> $this->id,
        'name'=> $this->name,
        
    ];
    }

  
}

With routes :

Route::get('/actor', function () {
    return ActorResource::collection(Actor::all());
});


Route::get('/actor/{actor}', function (Actor $actor) {
    return new ActorResource($actor);
});

In my blade :

<label for="creators" class="label">Créateur</label>
        <select class="form-control tags-selector" id="creators" name="creators[]" multiple="multiple">
           
        </select>

<script>

    $(document).ready(function() {
        $('.tags-selector').select2({
            minimumInputLength: 2,
            ajax: {
                url: '/api/actor',
                dataType: 'json',
                delay: 250,
            },
        });     
    });

</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

Nothing is working... And how can I get the selected value after ?

Is this the right way to do a multi select with a big table ?

Upvotes: 2

Views: 1105

Answers (1)

Recep G&#252;m&#252;ş
Recep G&#252;m&#252;ş

Reputation: 179

$(document).ready(function() {
    $('.tags-selector').select2({
        minimumInputLength: 2,
        $.ajax: {
            method:'get'// I am assuming this is a get method
            url: '/api/actor',
            dataType: 'json',
            delay: 250,
            success: function (data) {
                 console.log(data)//after you see the structure of data, try smt like 
                 //this. You should change this part acording yo your data
                  for(int i =0;i<data.data.lenght;i++){
                      $("#creators").append(new Option(data.data[i].name, data.data[i].id));          
                  }
            },
            error: function (error) {
                    console.log(error);
           },
        },
    });     
});

Well,I hope that will help you. I am also not the expert of them. Let me know if its works or not Update

                           <html >
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            </head>
            <body>
            <input type="text" id="box" onkeydown="asd()" />
            <select name="asd" id="select_box">
            </select>
            
            <script>
               function asd() {
                   var data = {"data":[{"id":50,"name":"Alec"},{"id":51,"name":"Recep"},{"id":52,"name":"Aecep"}]};
                   $("#box").on("keyup", function(){
                       $('#select_box').empty();
                       var search_text = $("#box").val().toLowerCase();
                       data_value = data.data[0].name.substring(search_text.length).toLowerCase();
                       for (var i=0; i<data.data.length; i++) {
                           if(search_text === data.data[i].name.substring(0,search_text.length).toLowerCase()){
                               $("#select_box").append(new Option(data.data[i].name, data.data[i].id));
                           }
                       }
            
                   });
               }
            </script>
            
            </body>
            </html>

This code is working. Change the variables properly for your project

Upvotes: 1

Related Questions