Change AutoComplete DataSource Dynamically
Environment
| Product | Progress® Kendo UI® AutoComplete for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I dynamically change the DataSource of a Kendo UI AutoComplete based on user selections that are made through radio buttons?
Solution
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>
</div>
<script>
$(document).ready(function () {
var ds1 = new kendo.data.DataSource({
data: [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary"
]
});
var ds2 = new kendo.data.DataSource({
data: [
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
]
});
// Create the UI of the AutoComplete.
var countries = $("#countries").kendoAutoComplete({
dataSource: ds1,
filter: "startswith",
placeholder: "Select country...",
separator: ", "
}).data("kendoAutoComplete");
$("#change").click(function() {
countries.setDataSource(ds2);
});
});
</script>
</div>