API에서 선택 2 사용자 지정 데이터 반환

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}), 
     ... 
    ] 
}] 

내가 사용 선택 2 버전 모르는해야하지만,> 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>