Сделайте правильный формат данных json для select2

Я пытаюсь использовать удаленные данные ajax для select2 (используя 4.0.6-rc.1), пробовал несколько примеров, сначала параметр q был undefined, но я решил его, и теперь выбор не дает мне результатов, не знаю, как отформатировать данные 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;
}

ИМЯ ПОЛЬЗОВАТЕЛЯ.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)
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
401
1

Ответы 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.info(data);
                var result = $.map(data, function (item) { return { id: item.id, text: item.username }});
                return { results: result };
            }
        }
  });

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

Другие вопросы по теме