How to get Kendo UI AutoComplete onKeyUp value inside ViewModel

Question

I am trying to get the Kendo UI autocomplete value as a user type, so I can send this request to the server to filter the results. The change event only fires on, not the key / down / press. Binding to a data value change also does not work for this scenario.

Is there any way to achieve this from ViewModel?

Please see the code below as jsFiddle here . You will notice that the work of changing the data value works on vanilla input, but not on autocomplete.

<div id="view"> <input data-value-update="keyup" data-bind="value: inputValue" data-placeholder="text input" /> <input data-role="autocomplete" data-placeholder="autocomplete" data-value-primitive="true" data-text-field="t" data-bind="source: data, value: acValue" /> </div> var viewModel = kendo.observable( { inputValue: '', acValue: '', data: new kendo.data.DataSource([ {name: 'John', age: 20 }, {name: 'John 1', age: 201 }, {name: 'John 2', age: 202 }, {name: 'John 3', age: 203 }, ]), onChange: function() { console.log('change'); } }); viewModel.bind('change', function(e) { alert(e.field + ' changed to ' + this[e.field]); }); kendo.bind($("#view"), viewModel); 

Answer 1

I went through the same problem.

I managed to process it with another observable property for display only.

But the main property of the observable will be updated in every KeyUp event.

 $('textarea').keyup(function () { viewModel.set("megaViewModel.ProductionNotes", $(this).val()); }); 

I know that we can update the Main Property on keyup when binding to the main property, but this can lead to incorrect Caret behavior.

Answer 2

According to some users, answers to other sites and blogs are not supported in autocomplete widgets.

Answer 3

Well, this is a dirty method, but it worked for me:

after initializing the widget, configure the listener:

 $($("#input").data("kendoAutoComplete").element[0]).on('keyup',function(){ //do your stuff here })