Wijmo 5 | MultiAutoComplete

Allow to select Multiple items from dropDown list using Ctrl/Shift key

by Joel Parks

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
<h1>
 MultiAutoComplete multiple selection
</h1>
The MultiAutoComplete allows to select only item from dropDown. This fiddle allows to select Multiple items with Ctrl/Shift and Click combination.
For this, mousedown event should be handled.
<br>
 <div style="height:70px">
   <wj-multi-auto-complete control="inpt"
     items-source="data"
     min-length="1"
     is-dropped-down-changing="isDroppedDownChanging(s,e)"
     is-dropped-down-changed="isDroppedDownChanged(s,e)"
     initialized="initialized(s,e)">
   </wj-multi-auto-complete>
 </div>
 <button ng-click="getSelectedItems()">Get Selected Items</button>
</div>

CSS

.wj-listbox-item label{
            width:300px;
        }
.wj-dropdown-panel{
  height: 50px;
}
.wj-dropdown{
  height: 50px;
}

JavaScript

var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope, $timeout) {
            let isCtrl = false;
            $scope.data = 'US,UK,Germany,Greece,Japan,Italy,Gabon,Gamba,Georgia,Russia,Ukraine,China,Nigeria,Mexico,Chile,Venezuela,Brazil,France,Turkey'.split(',');
            $scope.data1 = 'UK,Greece,Japan,Italy'.split(',');
            $scope.initialized = function (s, e) {
                let inpt = $scope.inpt;
                if (!inpt) return;               
                inpt.dropDown.addEventListener('mousedown', function (e) {
                    text= inpt.text;
                    if (e.ctrlKey ) {
                        let selItems = inpt.selectedItems,
                            nodeItems = s.dropDown.children,
                            selItm,  selIndex;                        
                        var _itms=s.collectionView.items;
                        console.log(e.srcElement.innerText)
                        selItm=_itms.find(isSelected,{txt:e.srcElement.innerText});
                        if (wijmo.hasClass(e.srcElement, 'wj-state-selected')) { 
                            // remove the selected item
                            wijmo.removeClass(e.srcElement, 'wj-state-selected');                            
                            selIndex = selItems.indexOf(selItm);                                                   
                            inpt.listBox.selectedIndex = -1;
                            selItems.splice(selIndex, 1);
                            s.selectedItems = selItems;
                        } else {
                            //add selected item   
                            selItems.push(selItm);
                            s.selectedItems = selItems;
                            wijmo.addClass(e.srcElement, 'wj-state-selected');
                        }
                        e.preventDefault();
                        e.stopImmediatePropagation();
              ...