ComboTreePlugin JQuery

ComboTreePlugin JQuery sample demo

by maheshBongani

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="example" placeholder="Select">

CSS

.comboTreeWrapper{
	position: relative;
	text-align: left !important;
}

.comboTreeInputWrapper{
	position: relative;
}

.comboTreeArrowBtn {
	position: absolute;
    right: 1px;
    bottom: 1px;
    top: 1px;
    box-sizing: border-box;
	border: none;
    border-left: 1px solid #c7c7c7;
    border-radius: 0 3px 3px 0;
}

.comboTreeDropDownContainer {
	display: none;
	background: #fff;
	border: 1px solid #aaa;
	max-height: 250px;
	overflow-y: auto;
	position: absolute;
    width: 100%;
    box-sizing: border-box;
}

.comboTreeDropDownContainer ul{
	padding: 0px;
	margin: 0;
}

.comboTreeDropDownContainer li{
	list-style-type: none;
	padding-left: 15px;
    cursor: pointer;
}

.comboTreeDropDownContainer li:hover{
	background-color: #ddd;}
.comboTreeDropDownContainer li:hover ul{
	background-color: #fff;}
.comboTreeDropDownContainer li span.comboTreeItemTitle.comboTreeItemHover{
	background-color: #418EFF;
	color: #fff;}

span.comboTreeItemTitle{
	display: block;
	padding: 2px 4px;
}
.comboTreeDropDownContainer label{
    cursor: pointer;
	width: 100%;
    display: block;
}
.comboTreeDropDownContainer .comboTreeItemTitle input {
	position: relative;
    top: 2px;
	margin: 0px 4px 0px 0px;
}
.comboTreeParentPlus{
    position: relative;
    left: -12px;
    top: 4px;
    width: 4px;
    float: left;
}


.comboTreeInputBox {
	padding: 5px;
    border-radius: 3px;
    border: 1px solid #999;
    width: 100%;
    box-sizing: border-box;
    padding-right: 24px;
}

.comboTreeArrowBtnImg{
	font-size: 10px;
}

JavaScript

/*!
 * jQuery ComboTree Plugin 
 * Author:  Erhan FIRAT
 * Mail:    [email protected]
 * Licensed under the MIT license
 */


;(function ( $, window, document, undefined ) {
    
    // Create the defaults once
    var comboTreePlugin = 'comboTree',
        defaults = {
            source: [], 
            isMultiple: false
        };

    // The actual plugin constructor
    function ComboTree( element, options ) {
    debugger;
        this.elemInput = element;
        this._elemInput = $(element);

        this.options = $.extend( {}, defaults, options) ;
        
        this._defaults = defaults;
        this._name = comboTreePlugin;
        
        this.init();
    }

    ComboTree.prototype.init = function () {
        // Setting Doms
        this.comboTreeId = 'comboTree' + Math.floor(Math.random() * 999999);

        this._elemInput.addClass('comboTreeInputBox');

        if(this._elemInput.attr('id') === undefined)
            this._elemInput.attr('id', this.comboTreeId + 'Input');
        this.elemInputId = this._elemInput.attr('id');

        this._elemInput.wrap('<div id="'+ this.comboTreeId + 'Wrapper" class="comboTreeWrapper"></div>');
        this._elemInput.wrap('<div id="'+ this.comboTreeId + 'InputWrapper" class="comboTreeInputWrapper"></div>');
        this._elemWrapper = $('#' + this.comboTreeId + 'Wrapper');

        this._elemArrowBtn = $('<button id="' + this.comboTreeId + 'ArrowBtn" class="comboTreeArrowBtn"><span class="comboTreeArrowBtnImg">▼</span></button>');
        this._elemInput.after(this._elemArrowBtn);
        this._elemWrapper.append('<div id="' + this.comboTreeId + 'DropDownContainer" class="comboTreeDropDownContainer"><div class="comboTreeDropDownContent"></div>');
        
        // DORP DOWN AREA
        this._elemDropDownContainer = $('#' + this.comboTreeId + 'DropDownContainer');
        this._elemDropDownContainer.html(this.createSourceHTML());
        
        this._elemItems =...