custom modular multiselect with object rendering

by bilbobaggins

HTML

<div id="inplast_name">
</div>

CSS

.active {
  background-color: #5897fb;
  color: #ffffff!important;

}

.srchpara ul
{
      -webkit-padding-start: 0px;
}
.form-control-multiselect {
  box-shadow: none;
  outline:none;
      border-width: 0px;
}
.form-control-multiselect :focus {
box-shadow: none!important;
outline:none!important;
border-width: 0px;
}
.spanmul
{
  background-color: white; 
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
    width:45%
}
.select2choiceremove {
        color: #999;
        cursor: pointer;
        display: inline-block;
        font-weight: 700;
        margin-right: 2px;
    }
   .sidebyside
   {
     display: inline-block !important;
   }
    .selectchips {
        background-color: #e4e4e4;
        border: 1px solid #aaa;
        border-radius: 4px;
        cursor: default;
        float: left;
        margin-right: 5px;
        margin-top: 5px;
        padding: 0 5px;
        display: inline-block !important;
    }
    .srchpara {


        color: Black!important;
        position: absolute!important;
        background-color: white;

        border-radius: 4px;
        box-sizing: border-box;
        z-index: 1000!important;
        border: 1px solid #cccccc;
        overflow-y: auto;
        max-height: 400px;
    }

    .srchpara a {
        display: block;
        padding: 7px 12px;
    }
    /* srchpara*/

JavaScript

String.prototype.capitalize = function() {
       return this.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
           return p1 + p2.toUpperCase();
       });
   };
 var multisel = function basemultiselect(selconfig, callback) {


    let me = {};
    me.identifier = selconfig.selectevent;
    me.callbackfunc = callback
    me.remotefunc = selconfig.remotefunc;
    me.internset = [];
    me.internbasearh = [];
    me.fieldname = selconfig.fieldkey;
    me.fieldval = "";
    me.filterparam = {};
    me.internbasesearchar = [];
    me.base = {};
    me.basesearchar = []
    me.init = function() {
            this.$el = $('' + this.identifier + '');
            this.$el.addClass('spanmul')
            this.renderinputtag();
            this.$input = this.$el.find('input');
            this.appendautopopulate(this.$input);
            this.bindEvents()
            //do other important setup things
        },
        me.bindEvents = function() {
            this.clickscrolleventstoggle();
            this.$input.on('input', this.addPerson.bind(this));
            this.$el.off();
            this.$el.on('keypress', this.dvkeyscroll.bind(this))
            this.$el.on('keyup', this.dvkeyscrollup.bind(this))
            this.$ul = this.$el.find('#dv_' + this.fieldname + ' ul');

            this.$ul.off();
            this.$ul.on('click', 'a.highlightselect', this.highlightPerson.bind(this));
            this.$divselrem = this.$el.find('div')
            this.$divselrem.off();
            this.$divselrem.on('click', 'div span.select2choiceremove', this.deletePerson.bind(this));
        },
        me.clickscrolleventstoggle = function() {
            $(document).on("mouseenter", ".srchpara ul li", function(e) {
                $('.srchpara ul li').removeClass("active");
                $(this).addClass("active");
            });
        },
        me.dvkeyscroll = function(e) {
            if (e.which == 13) { //Enter key pressed
            //jquery
               ...