为 select2 制作正确的 json 数据格式答案

【问题标题】：Make correct json data format for select2为 select2 制作正确的 json 数据格式
【发布时间】：2018-08-30 21:16:08
【问题描述】：

我正在尝试为 select2 ajax 远程数据（使用 4.0.6-rc.1），尝试了一些示例，起初 q 参数未定义但我解决了它，现在选择没有给我结果，不知道如何格式化json数据尝试了以下并在控制台中得到以下错误：

$('#compose_username').select2({
    dropdownParent: $("#modal-compose"),
    placeholder: "Search country here...",
    ajax: {
        url: "username.php",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;
            return {
                results: data.items,
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: false
    },
    // escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

function formatRepo(repo) {
    if (repo.loading) return repo.text;

    return repo.desc;
}

function formatRepoSelection(repo) {
    return repo.desc || repo.text;
}

USERNAME.PHP

include('../core/config.php');

try {
    $stmt = $db_con->query("SELECT id,username FROM users WHERE username LIKE '%".$_GET['q']."%' LIMIT 10");
    $stmt->execute();
    $json = [];

    while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $json[] = ['id'=>$row['id'], 'username'=>$row['username']];
    }

    echo json_encode($json);
} catch(PDOException $e) {
    echo $e->getMessage();
}

JSON 数据：

如果我输入 a 然后在控制台中得到以下内容，但 select2 中没有显示选项

(3) [{…}, {…}, {…}]
0
:
{id: "1", username: "admin"}
1
:
{id: "29", username: "adil3310"}
2
:
{id: "30", username: "asdsad"}
length
:
3
__proto__
:
Array(0)

【问题讨论】：

标签： javascript php json ajax jquery-select2

【解决方案1】：

经过一番努力，我设法让它工作，这是我试图解析 Json 数据并且它已经被解析的原因，所以我使用它并且它可以工作。下面的完整工作示例可能对其他人有所帮助：

  $('#compose_username').select2({
        // SET THIS IF SELECT IS IN A MODAL
        dropdownParent: $("#modal-compose") ,
        placeholder: "Search country here...",
       // MINIMUM INPUT TO SEARCH BEFORE
        minimumInputLength: 3,
        ajax: {
            url: "username.php",
            dataType: 'json',
            delay: 250,
            cache: false,
            data: function (params) {
                $('#compose_username').val(null).trigger('change');
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function(data, page) {
                console.log(data);
                var result = $.map(data, function (item) { return { id: item.id, text: item.username }});
                return { results: result };
            }
        }
  });

PHP(FOR GETTING LIST OF USERNAME，我们可以在查询中设置限制)

try{
    $stmt = $db_con->query("SELECT id,username FROM users WHERE username LIKE '%".$_GET['q']."%' LIMIT 10");
    $stmt->execute();
        $json = [];
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
             $json[] = ['id'=>$row['id'], 'username'=>$row['username']];
        }
        echo json_encode($json);
}
catch(PDOException $e){
    echo $e->getMessage();
}

【讨论】：