使用 select2 和 ajax laravel 资源进行多选答案

【问题标题】：Multi select with select2 and ajax laravel resource使用 select2 和 ajax laravel 资源进行多选
【发布时间】：2020-10-28 03:18:42
【问题描述】：

对于我的系列形式，我需要让所有演员都准备好进行选择。我有很多演员，我需要用 api 来获取他们。

我做了一个演员资源：

<?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,
        
    ];
    }

  
}

有路线：

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


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

在我的刀片中：

<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/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

什么都没有工作......我怎样才能在之后获得选定的值？

这是对大表进行多选的正确方法吗？

【问题讨论】：

你不应该把成功方法放在ajax中还是我错过了什么？
我不知道，这对我来说都是新的..我该怎么说？

标签： laravel jquery-select2

【解决方案1】：

$(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);
           },
        },
    });     
});

嗯，希望对你有帮助。我也不是他们的专家。让我知道它是否有效更新

                           <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>

此代码正在运行。为您的项目正确更改变量

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。