New to Kendo UI for jQuery? Download free 30-day trial

Change AutoComplete DataSource Dynamically


Product Progress® Kendo UI® AutoComplete for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I dynamically change the DataSource of a Kendo UI AutoComplete based on user selections that are made through radio buttons?


The following example demonstrates how to achieve the desired scenario.

    <div id="example">
    <div class="demo-section k-content">
       <h4>Choose shipping countries:</h4>
       <button id="change">Change DataSource</button>
       <input id="countries" style="width: 100%;" />
       <div class="demo-hint">Start typing the name of an European country</div>

       $(document).ready(function () {
           var ds1 = new{
             data: [
                   "Bosnia & Herzegovina",
                   "Czech Republic",

           var ds2 = new{
             data: [
                   "San Marino",
                   "United Kingdom",
                   "Vatican City"

           // Create the UI of the AutoComplete.
           var countries = $("#countries").kendoAutoComplete({
               dataSource: ds1,
               filter: "startswith",
               placeholder: "Select country...",
               separator: ", "

           $("#change").click(function() {

See Also

In this article