Question

我正在使用select2来显示API的数据返回。但是，数据无法加载。我做错了什么？任何想法如何解决这个问题？

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>

脚本：

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;
            }
        });

从API返回结果：

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

我不知道您使用的Select2版本是什么，但是＆gt; 4是建议。使用函数 templateResult 和 templateSelection 更好，稍后您可以返回HTML以进行更好的渲染。

您可以使用此snipplet演示。

$(".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>

Answer 2

$(".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>

从API返回Select2自定义数据

2 个答案: