New to select2, the list does not show

How Do I...
#1

Hi All,

I’m new to select2, this is my first try, I have a controller to get a list of timezones (see below), I want to list all of the timezones on my web page.

current problem: the list not showing

What I missed?

– my HTML

<select class="form-control select2" id="input-timezone" name="timezone"></select>

– js

        $(function () {

            $('#input-timezone').select2({
                ajax: {
                    url: '/Tenants/Get_TimeZonesAsync',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used
                        params.page = params.page || 1;

                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                placeholder: 'Search ...',
                minimumInputLength: 1
            });
        });

– Controller returning list of timezone

    {
      "result": true,
      "payload": [
        {
          "id": 0,
          "text": "Africa/Abidjan",
          "selected": false
        },
        {
          "id": 1,
          "text": "Africa/Accra",
          "selected": true
        },
        {
          "id": 2,
          "text": "Africa/Addis_Ababa",
          "selected": false
        }
      ]
    }
#2

I have better progress, now the list shows, but the search function not working properly, which means if I type it keeps going to the 1st item of the list, please help.

$(function () {
        $("#input-timezone").select2({
            ajax: {
                url: "/Tenants/Get_TimeZonesAsync",
                dataType: 'json',
                delay: 250,
                type: 'GET',
                data: function (params) {
                    return {
                        q: params.term, // search term
                    };
                },
                processResults: function (data) {
                    var arr = []
                    $.each(data, function (index, value) {
                        arr.push({
                            id: index,
                            text: value.text
                        })
                    })
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 1
        });
    });