Kendo UI 自动完成和多 Select 服务器端过滤器设置值使用 JavaScript

Question

我正在使用 Kendo UI 控件 KendoUI Autocomplete & KendoUI MultiSelect。我需要在客户端以编程方式更改这些控件值及其显示，而无需用户对这些控件进行操作。

如何重现该行为：

请看这个JS fiddlelink，有两个自动完成控件。
请在每个控件中输入几个字符，然后select自动建议的结果。
然后点击 Reverse 按钮，JS 尝试更改（反转）值，但是如果用户不点击自动提示中填充的结果，那将不会完成。

如何避免用户 select 访问结果？如果用户单击 Reveres，两个控件都应该有新的 selected 值，并且它的显示也应该反映出来。如果我点击 Show Selection，应该会显示新的 selected 值？我对 MultiSelect 也有类似的问题，如果相信如果我解决了这个问题，同样的解决方案也适用于 MultiSelect。

HTML

<div class="demo-section k-content">
  <h4>Find a product</h4>
  <input id="From" style="width: 100%;" placeholder="From" />
  <div class="demo-hint">Hint: type "che"</div>
  <br />
  <input id="To" style="width: 100%;" placeholder="To" />
  <div class="demo-hint">Hint: type "unc"</div>
  <br />
  <p>Please select From and To then clcik on reverse</p>
  <button id="reverse">
    Reverse
  </button>
  <button id="show">
    Show Selection
  </button>
  <p id="result">

  </p>
</div>

JS

 $(document).ready(function() {
   $("#result").html("");
   $("#From").kendoAutoComplete({
     dataTextField: "ProductName",
     filter: "contains",
     minLength: 2,
     dataSource: {
       type: "odata",
       serverFiltering: true,
       transport: {
         read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
       }
     }
   });
   $("#To").kendoAutoComplete({
     dataTextField: "ProductName",
     filter: "contains",
     minLength: 2,
     dataSource: {
       type: "odata",
       serverFiltering: true,
       transport: {
         read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
       }
     }
   });

   $("#reverse").click(function(e) {
     $("#result").html("");
     var $departure = $("#From").data("kendoAutoComplete");
     var $destination = $("#To").data("kendoAutoComplete");

     var departureStation = $departure.dataItem();
     var destinationStation = $destination.dataItem();

     $departure.search(destinationStation.icao_id);
     $departure.select($departure.ul.children().eq(0));
     $departure.value(destinationStation.DisplayName);
     $departure.trigger("change");
     $departure.close();

     $destination.search(departureStation.icao_id);
     $destination.select($destination.ul.children().eq(0));
     $destination.value(departureStation.DisplayName);
     $destination.trigger("change");
     $destination.close();

   });

   $("#show").click(function(e) {
     $("#result").html("");
     var $departure = $("#From").data("kendoAutoComplete");
     var $destination = $("#To").data("kendoAutoComplete");

     var departureStation = $departure.dataItem();
     var destinationStation = $destination.dataItem();
     var from = JSON.stringify(departureStation);
     var to = JSON.stringify(destinationStation);
     $("#result").html("From :" + from + "<br/><br/><br/><br/>To: " + to);
   });
 });

Answer 1

一个主要问题是您有 serverFiltering: true 并且正在发生异步 activity。

search 方法将导致对数据源应用过滤器，这反过来会导致服务器交互，完成后将触发事件 dataBound。

kendoAutoComplete 在键入过程中打开其下拉菜单，并将保持打开状态，同时对每个新的击键进行额外的过滤（隐式搜索）。

解决方案：

安装 dataBound 事件处理程序来检查交换操作是否被强制执行，如果是，则自动 select 第一个下拉项目。
使用 ready-function-scoped 标志变量来指示交换正在进行
交换点击处理程序将：
- 设置标志变量
- 调用程序化搜索
  - 从文档中，搜索将附带打开 DDL。
- dataBound 处理程序：
  - 强制 DDL selection 因为标志处于活动状态。
  - 关闭 DDL
  - 触发变化
  - 关闭标志变量

JS 来自这个Dojo

 $(document).ready(function() {

   $("#From").kendoAutoComplete({
     dataTextField: "ProductName",
     filter: "contains",
     minLength: 2,
     dataBound: function(e) { swap1() },
     dataSource: {
       type: "odata",
       serverFiltering: true,
       transport: {
         read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
       }
     }
   });

   $("#To").kendoAutoComplete({
     dataTextField: "ProductName",
     filter: "contains",
     minLength: 2,
     dataBound: function(e) { swap2() },
     dataSource: {
       type: "odata",
       serverFiltering: true,
       transport: {
         read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
       }
     }
   });

   var one_swapping = false;
   var two_swapping = false;

   function swap1() {
     if (one_swapping) {
       var ac = $("#From").data('kendoAutoComplete');
       ac.select(ac.ul.children().eq(0));
       ac.close();
       ac.trigger("change");
       one_swapping = false;
     }
   }

   function swap2() {
     if (two_swapping) {
       var ac = $("#To").data('kendoAutoComplete');
       ac.select(ac.ul.children().eq(0));
       ac.close();
       ac.trigger("change");
       two_swapping = false;
     }
   }

   $("#swap").click(function(e) {
     $("#result").html("");     

     var one = $("#From").data("kendoAutoComplete");
     var two = $("#To").data("kendoAutoComplete");

     var one_val = one.element.val();
     var two_val = two.element.val();

     one_swapping = true;
     one.search(two_val);  // force the filter 

     two_swapping = true;
     two.search(one_val);  // force the filter
   });

   $("#show").click(function(e) {
     $("#result").html("");
     var $departure = $("#From").data("kendoAutoComplete");
     var $destination = $("#To").data("kendoAutoComplete");

     var departureStation = $departure.dataItem();
     var destinationStation = $destination.dataItem();
     var from = JSON.stringify(departureStation);
     var to = JSON.stringify(destinationStation);
     $("#result").html("From :" + from + "<br/><br/><br/><br/>To: " + to);
   });
 });

Kendo UI 自动完成和多 Select 服务器端过滤器设置值使用 JavaScript

Kendo UI Autocomplete And Multi Select server side filter set value using JavaScript

javascript

jquery

kendo-ui

kendo-autocomplete