Disable Kendo Autocomplete

Question

I have this Kendo Autocomplete code:

HTML:

<input id="faceUsers" type="text" placeholder="Search..." data-role="autocomplete" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false"  aria-autocomplete="list" aria-busy="false">

JS:

 $("#faceUsers").kendoAutoComplete({
                            dataTextField: "name",
                            dataValueField: "name",
                            template: '<img src=\"${data.picture.data.url}\" class="imguser" />' +
                                    '<h4 class="autotext">${ data.name }</h4>',                               
                            filter: "contains",
                            minLength: 1,
                            height: 370,
                            dataSource: faceDataSource
        });     

I have set properly my faceDataSource and it works as expected.

The problem i am facing is how i can disable this autocomplete. After a particular action i want the input element to behave as a normal input element without autocomplete.

Answer 1

If you want to completely remove it, use destroy:

$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.destroy();

Answer 2

For your Better Reference just have a look to :: JS Fiddle Demo

As you can see in the Demo example link above the property of suggest into autocomplete is set to on/off as::

var autocomplete = $("#autocomplete").kendoAutoComplete({
    suggest: true,
    dataSource: ["Item1", "2Item"]             
}).data("kendoAutoComplete");

And also have a look to

http://www.telerik.com/forums/turn-off-on-stop-and-start-autocomplete-and-suggest-after-init

Answer 3

Another point of view. We can able to do autocomplete as read only if we want to disable the editing.

var sampledd= $("#dd").data("kendoAutoComplete"); 
sampledd.readonly(false); 

Disable Suggest

sampledd.suggest(true); // this one causing issue in IE