jQuery - Disable kindo autocomplete lors du traitement d'informations dans la base de données - Stack Overflow

I have my Kindo AutoComplete within a helper function. When I make a search and click one the of AutoComplete results, a function is fired up which pulls in data from the data source. It takes a while for the information to be returned and displayed on the page. During that process I need the AutoComplete to be disabled and it must be enabled back once the data is processed and displayed. Basically, I need to prevent the user from making a new search while the first selected request is being processed.

The Kendo AutoComplete has a method to enable or disable.

http://docs.telerik.com/kendo-ui/api/web/autocomplete#methods-enable

From the linked example:

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.enable(false);
</script>

You should use requestStart and requestEnd for controlling when to enable or disable (enable(false)) the AutoComplete. This event handlers are part of the DataSource.

Example:

var ds = new kendo.data.DataSource({
    transport: {
        read : {
            url: "..."
        }
    },
    requestStart: function (e) {
        ac.enable(false);
    },
    requestEnd: function(e) { 
        ac.enable(true);
    }
});

Example here : http://jsfiddle.net/OnaBai/nQ5JJ/

EDIT: If what you want is to prevent to use the AutoComplete once the user picks an option, then you should disable the autocomplete when close event is fired and enable again when that new data is available.

var ac = $("input").kendoAutoComplete({
    dataSource: states,
    close : function (e) {
        // Disable autocomplete while we read from `ds` DataSource
        ac.enable(false);
        // Trigger ope
        ds.read();
    }
}).data("kendoAutoComplete");

and when the read operation finishes, then you enable the autocomplete again:

var ds = new kendo.data.DataSource({
    transport: {
        read : {
            url : "...";
        }
    },
    requestEnd: function(op) {
        ac.enable(true);
    }
});

Example here : http://jsfiddle.net/OnaBai/nQ5JJ/1/

I have my Kindo AutoComplete within a helper function. When I make a search and click one the of AutoComplete results, a function is fired up which pulls in data from the data source. It takes a while for the information to be returned and displayed on the page. During that process I need the AutoComplete to be disabled and it must be enabled back once the data is processed and displayed. Basically, I need to prevent the user from making a new search while the first selected request is being processed.

The Kendo AutoComplete has a method to enable or disable.

http://docs.telerik.com/kendo-ui/api/web/autocomplete#methods-enable

From the linked example:

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.enable(false);
</script>

You should use requestStart and requestEnd for controlling when to enable or disable (enable(false)) the AutoComplete. This event handlers are part of the DataSource.

Example:

var ds = new kendo.data.DataSource({
    transport: {
        read : {
            url: "..."
        }
    },
    requestStart: function (e) {
        ac.enable(false);
    },
    requestEnd: function(e) { 
        ac.enable(true);
    }
});

Example here : http://jsfiddle.net/OnaBai/nQ5JJ/

EDIT: If what you want is to prevent to use the AutoComplete once the user picks an option, then you should disable the autocomplete when close event is fired and enable again when that new data is available.

var ac = $("input").kendoAutoComplete({
    dataSource: states,
    close : function (e) {
        // Disable autocomplete while we read from `ds` DataSource
        ac.enable(false);
        // Trigger ope
        ds.read();
    }
}).data("kendoAutoComplete");

and when the read operation finishes, then you enable the autocomplete again:

var ds = new kendo.data.DataSource({
    transport: {
        read : {
            url : "...";
        }
    },
    requestEnd: function(op) {
        ac.enable(true);
    }
});

Example here : http://jsfiddle.net/OnaBai/nQ5JJ/1/

Source