Select2カスタムデータからの返品

Question

私はAPIからのデータ返品を表示するためにselect2を使用しています。しかし、データはロードできませんでした。私は何か間違っていますか？任意のアイデアをどのようにこれを修正するには？

HTML：

<select class="js-example-basic-single form-control select2 select2-hidden-accessible" id="user" name="user_id" autocomplete="off" required="required"> 
<option value="">Please select</option> 
</select> 

スクリプト：APIから

var url = "{{env('API_URL')}}";  
var username = null; 
     $(".select2").select2({ 
      placeholder: "Please select", 
      width: null, 
      ajax: { 
       dataType: "jsonp", 
       method: "GET", 
       data: function (term) { 
        username = term.term; 
        return {"username": username}; 
       },     
       url: url+"user/search/username?", 
       results: function (data) { 
        return { 
         results: data.result.users 
        }; 
       }, 
      }, 
      formatResult: function (option) { 
       return "<option value='" + option.id + "'>" + option.username + "</option>"; 
      }, 
      formatSelection: function (option) { 
       return option.id; 
      } 
     }); 

結果リターン：

result : [{"users":["[object] (App\\User: {\"username\":\"Kaki\",\"id\":123456})","[object] (App\\User: {\"username\":\"(Alan)\",\"id\":123457})","[object] (App\\User: {\"username\":\"Alex\",\"id\":123458})","[object] (App\\User: {\"username\":\"Sky\",\"id\":1234569})","[object] (App\\User: {\"username\":\"Kvin\",\"id\":123460})"]}] [] 

Answer 1

一つのことがうまくフォーマットされていないAPIからあなたのJSONのリターンです。

[{ 
    "users":[ 
     "[object] (App\\User: {\"username\":\"Kaki\",\"id\":123456})", 
     "[object] (App\\User: {\"username\":\"(Alan)\",\"id\":123457})", 
     ... 
    ] 
}] 

が

[{ 
    "users":[ 
     {"username":"Kaki","id":123456}), 
     {"username":"(Alan)","id":123457}), 
     ... 
    ] 
}] 

する必要があります私はあなたが使用Selectセレクトバージョンが何であるかわからないが、> 4がアドバイスです。 関数を使用するtemplateResultとtemplateSelectionが優れています。その後、HTMLをより適切なレンダリングに返すことができます。

このスニペットのデモを使用できます。

$(".select2").select2({ 
 
    placeholder: "Please select", 
 
    width: null, 
 
    ajax: { 
 
     dataType: "json", 
 
     method: "GET",    
 
     url: function (params) { 
 
      // return 'url+"user/search/username?' + params.term; 
 
      
 
      // Fake url to make demo working, use upper line 
 
      return 'http://ip.jsontest.com/'; 
 
     }, 
 
     processResults: function (data) { 
 
      // Use this function to convert api result to Select2 result 
 
      // return {"results":data.users}; 
 
      
 
      // Build fake answer for demo 
 
      return {"results":[{"username":"Kaki","id":123456},{"username":"(Alan)","id":123457}]}; 
 
     }, 
 
    }, 
 
    templateResult: function (dataRow) { 
 
     if (dataRow.loading) return dataRow.text; 
 
     return dataRow.username; 
 
    }, 
 
    templateSelection: function (dataRow) { 
 
     return dataRow.username; 
 
    } 
 
});

.select2 { 
 
    width:50% 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/select2/4.0.1/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://cdn.jsdelivr.net/select2/4.0.1/js/select2.full.js"></script> 
 

 
<select class="form-control select2" id="user_id" name="user_id" autocomplete="off" required="required"> 
 
<option value="">Please select</option> 
 
</select>