Kendo autocomplete not showing results

Question

I'm trying to add a simple autocomplete to my page that will show the available numbers. I can see the call back to the controller and the list is populated in the controller but nothing is displayed on the front-end.

I've looked at the response in the browser and it is valid json data coming back.

HTML:

<input id="autocomplete"/>

JavaScript:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "Entity/GetAvailableNumbers",
            dataType: "json",
            data: {
                q: function () {
                    return $("#autocomplete").val();
                }
            }
        }
    }
});
dataSource.read();
console.log(dataSource);
$("#autocomplete").kendoAutoComplete({
    dataSource: {
        data: dataSource
    }
});

Controller:

public ActionResult GetAvailableNumbers([DataSourceRequest] DataSourceRequest request, string text)
{
    // Simple loop that puts numbers into a list (usableNumbers)
    return Json(usableNumbers, JsonRequestBehavior.AllowGet);
}

Answer 1

This is what ended up working for me.

JavaScript:

        $("#autocomplete").kendoAutoComplete({
            minLength: 2,
            filter: 'contains',
            dataSource: {
                type: "json",
                serverFiltering: false,
                transport: {
                    read: "Entity/GetAvailableNumbers"
                },
            }
        });