MaterializeCSS 1.0 rc1 AutoComplete with Ajax/XHR

    var schoolNameElem = document.getElementById("SchoolName");
    var instance = M.Autocomplete.getInstance(schoolNameElem);

    // we'll handle the event and ignore MaterializeCSS's approach
    instance._handleInputKeydown = function () { };

    schoolNameElem.addEventListener('keydown',
        _.debounce(function () {
                getSchools(schoolNameElem.value).then(function (data) {
                    var dataForM = {};
                    for (var i = 0; i < data.length; i++) {
                        dataForM[data[i]] = null;
                    }

                    // some hackery needed to get the data in the object format and get it to open after completion
                    instance.updateData(dataForM);

                    // my first attempt
                    instance._renderDropdown(dataForM, schoolNameElem.value);
                    instance.dropdown.isOpen = false;
                    instance.dropdown.open();

                    // slightly improved approach (comment out the lines above)
                    // Have to unfocus and focus to get materialize autocomplete to look at new data.
                    schoolNameElem.blur();  
                    schoolNameElem.focus();
                });
        }, 500)
    );

    var getSchools = function (term) {
        showLoadingIndicator('school-name-loading-indicator');
        return $.ajax({
            url: "/Account/GetSchools",
            dataType: "json",
            data: {
                term: term,
                state: $("#StateId").val(),
                schoolTypeId: $('#SchoolTypeId').val(),
                limit: 50
            }
        }).always(function () {
            hideLoadingIndicator('school-name-loading-indicator');
        });
    }