Selectize.js does not display parameters from the server

Question

Using Selectize.js, I can get data from the server, but nothing appears in the callback drop-down list. Maybe this is a data format?

On the server, I use System.Web.Script.Serialization.JavaScriptSerializer to serialize a datatable (C #) and return a JSON object.

I don’t understand why the data is not displayed.

the code:

<div class="sandbox">
    <label for="select-movie">Movie:</label>
    <select id="select-movie" class="movies" placeholder="Find a PO..."></select>
</div>

<script class="show">
    $('#select-movie').selectize({
    valueField: 'ID',
    labelField: 'PO',
    searchField: 'PO',
    create: false,
    options: [],
    render: {
        option: function (item, escape) {
            return '<div>' + item.PO + ' ' + escape(item.PO) '</div>';
        }
    },
    load: function (query, callback) {

        if (!query.length) return callback();

        var dataString = JSON.stringify({
        prefixText: query
        });

        $.ajax({
        type: "POST",
        url: "Default.aspx/GetUsers",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        data: dataString,
        error: function () {
            callback();
        },
        success: function (msg) {
            alert(msg.d);
            callback(msg.d);


        }
        });
    }
    });
</script>  

Data returned from the server:

{
    "d":"[
        {
            \"ID\":1,
            \"PO\":\"PO/REQ Number\"
        },
        {
            \"ID\":262,
            \"PO\":\"this po\"
        },
        {
            \"ID\":264,
            \"PO\":\"Test po\"
        },
        {
            \"ID\":267,
            \"PO\":\"Test PO 1\"
        }
    ]"
}

Answer 1

The data returned from server ( msg.d) is String. He must be Array.

You must check your method Default.aspx/GetUsersin order to return it.