kendo Autocomplete

by RichardAD

HTML

<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<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="swap">
    Swap
  </button>
  <button id="show">
    Show Selection
  </button>
  <p id="result">

  </p>
</div>

CSS

#result { background: green; color: white; }

JavaScript

$(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() {
     console.log('1');
     var ac = $("#From").data('kendoAutoComplete');
     if (one_swapping) {
       ac.select(ac.ul.children().eq(0));
       ac.close();
       ac.trigger("change");
	     one_swapping = false;
     }
   }

   function swap2() {
     console.log('2');
     var ac = $("#To").data('kendoAutoComplete');
     if (two_swapping) {
       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 =...