基于Kendo提供Kendo自动完成数据DropDownList选择

Question

我有一个Kendo自动完成控件，它应该根据父Kendo下拉列表的选定值填充其数据。

我想知道如何去做这件事。我正在使用MVC 4和Razor视图。

我试图做这样的，但这没有工作：

<div class="editor-field"> 
    @Html.Kendo().DropDownListFor(x => x.CustomerId).Name("customerDropDownList").Events(e=>e.Close("selectedItem")).Text(ViewBag.Customers[Model.CustomerId].TextValue).AutoBind(false).DataTextField("TextValue").DataValueField("Id").BindTo(ViewBag.Customers).HtmlAttributes(new { style = "width: 215px" }) 
</div> 

<div class="editor-field"> 
    @Html.Kendo().AutoComplete().Name("customerOrders").Filter("startsWith").Placeholder("Customer Order Number.") 
</div> 


<script> 
    $('#customersDropDownList').kendoDropDownList({ 
     close : function selectItem (e) { 
      var item = e.item; 
      var text = item.text(); 
      // Use the selected item or its text 
     } 
    }); 
</script> 

Answer 1

在改变（或OnClose中或ONSELECT）下拉列表的情况下，你可以简单地设置自动完成的使用本地或远程数据源数据如下：

<div class="editor-field"> 
    @Html.Kendo().DropDownListFor(x => x.CustomerId).Name("customerDropDownList").Events(e=>e.Change("onDropdownChange")).Text(ViewBag.Customers[Model.CustomerId].TextValue).AutoBind(false).DataTextField("TextValue").DataValueField("Id").BindTo(ViewBag.Customers).HtmlAttributes(new { style = "width: 215px" }) 
</div> 

<div class="editor-field"> 
    @Html.Kendo().AutoComplete().Name("customerOrders").Filter("startsWith").Placeholder("Customer Order Number.") 
</div>  

<script> 
    function onDropdownChange(e) { 

     var selectedValue = this.value();  
     // If you have local data for every dropdown option, wrap them in individual datasource and switch accordingly. 
     var dataSourceForoption1 = kendo.data.DataSource({ data: ["John", "Adam", "binbsr:)", "ginni"] });       
     var autocomplete = $("#customerOrders").data("kendoAutoComplete"); 
     autocomplete.setDataSource(dataSourceForoption1); // For now, same dataSource for every option 

    }  

</script> 

希望它有帮助。