dual-data-picker/src/js/services/events.js

## Settings editableDiv : true This use div instead input. Usefull to eliminate autocomplete feature.

export default class Events {

    constructor(app) { 
        this.app = app;
        this.keyUpTm = false;
        this.listen();
    }

    listen() {

        var self = this;

        let mainContainer = this.app.Ui.getMainContainer();

        

        mainContainer.addEventListener("click", function(e) {
            
            let optionEl = e.target.closest(".dual-data-picker__option");
            
            if (optionEl) {
                self.clickOnOption(optionEl);
            }
        });

        this.app.Ui.searchField.addEventListener("keyup", function() {
            
            if (self.keyUpTm != false) {
                clearTimeout(self.keyUpTm);
            }

            self.keyUpTm = setTimeout(function() {
                self.app.Repository.search = self.app.Ui.searchField.value;
                self.app.Ui.redraw();
            }, 200);
            
        });
    }


    clickOnOption(el) {
        let value = el.getAttribute("data-value");

        let data = this.app.Repository.data;

        for (let i = 0; i < data.length; i++) {

            if (data[i].value == value) {
                if(data[i].selected === true) {
                    data[i].selected = false;
                    this.app.Select.deselect(data[i].value);
                }
                else {
                    data[i].selected = true;
                    this.app.Select.select(data[i].value);
                }
            }
        }

        this.app.Ui.redraw();
    }
}