Kendo UI Autocomplete And Multi Select устанавливает значение фильтра на стороне сервера, используя JavaScript

Question

Я использую элементы управления Kendo UI KendoUI Autocomplete & KendoUI MultiSelect . Мне нужно изменить эти значения элементов управления и их программное отображение на стороне клиента без действий пользователя с этими элементами управления.

Как воспроизвести поведение:

1. Пожалуйста, посмотрите на этой ссылке JS fiddle имеется два элемента управления автозаполнения.
2. Пожалуйста, введите несколько символов в каждом элементе управления и выберите результат из автоматического предложения.
3. Затем нажмите на кнопку реверса, JS попытается изменить (отменить) значения, но это не завершить, не нажимая пользователя на результат, введенный в автоматическом предложении.

Как можно избежать выбора пользователем результатов? Если пользователь нажимает на Reveres, оба элемента управления должны иметь новые выбранные значения, и их отображение также должно отражать это. Если я нажму на «Показать выделение», это должно показать новые выбранные значения? У меня аналогичная проблема и с 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 и происходит асинхронное действие.

Метод search заставит применить фильтр к источнику данных, что, в свою очередь, вызовет взаимодействие с сервером, которое будет событие огня dataBound после завершения.

kendoAutoComplete открывает раскрывающийся список во время набора текста и оставляет его открытым , в то время как дополнительная фильтрация (неявный поиск) происходит для каждого нового нажатия клавиши.

Решение:

• Установить dataBound обработчики событий, которые проверяют, было ли выполнено действие свопинга, и, если это так, автоматически выбирают первый выпадающий элемент.
• Используется готов -function-scoped помечать переменные, чтобы указать, что происходит подкачка
• Обработчик щелчка свопа будет:
  • Установить переменные флага
  • Вызов программы c search
    • Из документов при поиске будут открыты DDL.
  • обработчики dataBound:
    • принудительный выбор DDL, поскольку флаг активен.
    • cl ose DDL
    • смена триггера
    • флаг переключения переменной выключен

JS из этого Додзё

 $(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);
   });
 });