Kendo UI Autocomplete custom binding

Question

I have service which give me top 10 records of result which is typed by user in search TextBox. So on keypress of textbox there is call of my service. Here i am using KendoUI AutoComplete so the problem is my service get call before autocomplete define. Can any one have idea?

<input data-bind="value: searchString, valueUpdate: 'afterkeydown'"  placeholder="Search me.."/>
searchString: ko.computed({
        read: function () { },
        write: function (val) {            
           BindAutoTextBox(val);
            return false;
        }
    }).extend({ throttle: 1000 }),

function BindAutoTextBox(val){

 ServiceHelper.getData('search/users?SearchText='+val, function (data) {     

        $("#LeftSearch").kendoAutoComplete({
            dataSource: {
                data: data
            },
            dataTextField: "User_Code",
            template: '<table width="100%"><tr><td width="20%" valign="top">#:User_Code#</td><td width="30%" valign="top">#:Full_Name#</td><td width="30%" 

valign="top">#:Group_Name#</td></tr></table>'

        });

        var autoComplete = $("#LeftSearch").data("kendoAutoComplete");
        // set width of the drop-down list
        autoComplete.list.width(355);

    }, null, 'http://abc/ApplicationRestService/', 'Users');

}

Can any one give me solution in brief detail code ?

Can you share the code with me as I have bit kendo experience — Shebin Mathew
Please try with the below link. stackoverflow.com/questions/12560736/… — Jayesh Goyani

Hiral Savaria Hiral Savaria · Accepted Answer · 2013-11-22T06:38:59

I found my solution using setDataSource of Autocomplete kendoUI you can change your datasource from your service which will getting call on keypress...

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  dataSource: [ "Apples", "Oranges" ]
});
var dataSource = new kendo.data.DataSource({
  data: [ "Bananas", "Cherries" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.setDataSource(dataSource);
</script>



 $("#autocomplete").keyup(function (e) {

    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
     dataSource = new kendo.data.DataSource({
                        data: ["Apples", "Oranges","Bananas", "Cherries"]
                    });
     autocomplete.setDataSource(dataSource);                

});

Kendo UI Autocomplete custom binding

2 Answers