KB - Wijmo 5 - Get Selected Input

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>
<br>
        <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>
        <button ng-click="getSelectedItems()">Get Selected Items</button>



    </div>

CSS

.wj-listbox-item label{
            width:100%;
        }

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'.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();
                        inpt.text=text;
                        inpt.delay=0;
         ...