Wijmo 5 | MultiAutoComplete

Allow to select Multiple items from dropDown list using Checkboxes same as MultiSelect

by Manish Gupta

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 same as MultiSelect by checking checkboxes for each item.<br>
For this, mousedown event  and formatItem should be handled.
<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;    
                // format DropDown by adding CheckBoxes for each item
                inpt.formatItem.addHandler(function(s,e){
                    e.item.innerHTML="<input type='checkbox' />"+e.item.innerHTML;
                });
                // if Control focus lost and dropDown is opened, closed dropDown
                inpt.lostFocus.addHandler(function(s,e){
                    if(s.isDroppedDown){
                        s.isDroppedDown=false;
                    }
                })
 //               
                inpt.dropDown.addEventListener('mousedown',function(e){   
                    let selItems= inpt.selectedItems,
                        text=inpt.text,
                        nodeItems=inpt.dropDown.children,
                        items=inpt.collectionView.items,
                        selItem,selIndex;
                    selItem= items.find(isSelected,{txt:e.srcElement.innerText});                                        
                    if(selItem){    
                        if(selItems.indexOf(selItem)==-1){
                            selItems.push(selItem);
                        }else{
                            selIndex=selItems.indexOf(selItem);
                            selItems.splice(selIndex,1);
                        }     
                    }else{                        
                        var cb= e.srcElement.querySelector("input");                        
                        for(var i=0;i<items.length;i++){
                            selIndex=selItems.indexOf(items[i]);             ...