erhanfirat / combo-tree

ComboTree is a jQuery Plugin which is a combobox item with tree structured data list and multi/single selection options and more.

1.3.1 Updates

• Outsource libraries cancelled.
• Refactoring JS and CSS.
• Many bugs resolved on both UI and Functionality sides.

1.2.1 Updates

• Filter is fixed & updated.
• icontains.js dependency is deprecated.

ComboTree jQuery Plugin v 1.2.1

ComboTree is a jQuery Plugin which is a combobox item within tree structured data list and multiple/single selection options and more. It has been developed to manage large amount of choices in a combobox and multi selection feature.

Features:

• Tree structured data list in combobox dropdown menu
• Multiple & Single selection
• Cascade selection (for multiple mode)
• Returns selected item(s) as title or id array
• Filtering (for multiple mode)
• Consumes JSON source
• Key controls are available for both selection and filter inputs.

Dependencies:

• jQuery

Configurations:

• isMultiple: {true/false} | default: false | decide if it is multiple selection behaviour or single
• cascadeSelect: {true/false} | default: false | decide if parent selection should cascade to children in multiple selection
• source: {JSON Data Array} | takes source of combobox dropdown menu as a JSON array.
• selected: {JSON Data Array} | takes the list of ID's that corespond from the source.
• collapse: {true/false} | default: false | makes sub lists collapsed.
• selectAll: {true/false} | default: false | decide if use 'select all' feature.

Methods

• getSelectedIds(): Returns selected item(s) id list as array or null. (i.e. [12, 5, 7], [7], null)
• getSelectedNames(): Returns selected item(s) name list as array or null. (i.e. ["Piegon", "Cat", "Horse"], ["Lion"], null)
• setSource(): You can initialize ComboTree then set source after your JSON data is retrieved.
• clearSelection(): Clear selected items.
• selectAll(): select all items.
• setSelection(selectionIdList): Set selected values of combotree by id array or single id parameter. If you want to clear previous selections please use clearSelection() before setSelection(). (i.e. ct1.setSelection([12, 5, 7]) | ct1.setSelection(5)

Events

• onChange(callBackFunction): Triggers after selection changes.

Usage

There should be an input element to apply and a JSON Data source.

comboTree1 = $('#justAnInputBox').comboTree({
	source : SampleJSONData,
	isMultiple: true,
	cascadeSelect: true,
	selected: ['0']
});

// Array, One title/id, or False value return
var selectedTitles = comboTree1.getSelectedItemsTitle();
var selectedIds = comboTree1.getSelectedItemsId();

// To remove plugin
comboTree1.destroy();

Source Dataset

Three parameter are needed: id, title and subs (array).

Can contain the following options:

• isSelectable: {true/false} | default: true | allows or disallows item to be selected

• collapse: {true/false} | default: false | makes sub lists collapsed at start

  var SampleJSONData = [ { id: 0, title: 'Horse' }, { id: 1, title: 'Birds', subs: [ { id: 10, title: 'Piegon' }, { id: 11, title: 'Parrot' }, { id: 12, title: 'Owl' }, { id: 13, title: 'Falcon' } ] }, { id: 2, title: 'Rabbit' }, { id: 3, title: 'Fox' }, { id: 5, title: 'Cats', subs: [ { id: 50, title: 'Kitty' }, { id: 51, title: 'Bigs', subs: [ { id: 510, title: 'Cheetah' }, { id: 511, title: 'Jaguar' }, { id: 512, title: 'Leopard' } ] } ] }, { id: 6, title: 'Fish' } ];

You can donate to support me

https://www.blockchain.com/btc/address/15c5AxBVgNxkwaHSTBZMiCV5PL41DKe88v

combo-tree's Issues

getSelectedItemsTitle & getSelectedItemsId errors

Following functions are not working . Would please submit example of following two functions in your sample file?

var selectedTitles = comboTree1.getSelectedItemsTitle();
var selectedIds = comboTree1.getSelectedItemsId();

Regards

Asif

Overflow hidden

When the combotreedropdowncontainer has overflow set to hidden so that the you can't scroll if data loaded doesn't all fit. Can't see where to change this.

get parent text during on-change/selected event

I needed to get the parent text during the onChange event, so hacked the code using:

--- C:\git\combo-tree\comboTreePlugin.js	2022-03-14 16:43:17.000000000 -0700
+++ C:\git\myApp\static\Drop-Down-Combo-Tree\comboTreePlugin.js	2022-03-11 14:46:57.000000000 -0700
@@ -323,13 +323,15 @@
       return false;
     }
 
     if ($(ctItem).data("selectable") == true) {
       this._selectedItem = {
         id: $(ctItem).attr("data-id"),
-        title: $(ctItem).text()
+        title: $(ctItem).text(),
+        obj:$(ctItem),
+        parent: $(ctItem).closest('.ComboTreeItemParent').children('.comboTreeItemTitle')
       };
 
       let check = this.isItemInArray(this._selectedItem, this.options.source);
       if (check) {
         var index = this.isItemInArray(this._selectedItem, this._selectedItems);
         if (index) {
@@ -344,13 +346,15 @@
   };
 
   ComboTree.prototype.singleItemClick = function (ctItem) {
     if ($(ctItem).data("selectable") == true) {
       this._selectedItem = {
         id: $(ctItem).attr("data-id"),
-        title: $(ctItem).text()
+        title: $(ctItem).text(),
+        obj:$(ctItem),
+        parent: $(ctItem).closest('.ComboTreeItemParent').children('.comboTreeItemTitle')
       };
     } // if selectable
 
     this.refreshInputVal();
     this.closeDropDownMenu();
   };
@@ -404,13 +408,13 @@
     }
 
     this._elemInput.val(tmpTitle);
     this._elemInput.trigger('change');
 
     if (this.changeHandler)
-      this.changeHandler();
+      this.changeHandler(this);
   };
 
   ComboTree.prototype.dropDownMenuHover = function (itemSpan, withScroll) {
     this._elemItems.find('span.comboTreeItemHover').removeClass('comboTreeItemHover');
     $(itemSpan).addClass('comboTreeItemHover');
     this._elemHoveredItem = $(itemSpan);

This is not working when generate clone of dropdown

This is not working when generate clone of dropdown

Not displaying data properly when pressing the Alt+Tab,F12 key combination, specifically when using single selection mode.

"comboxtree" jQuery plugin not displaying data properly when pressing the Alt+Tab key combination or F12 key, specifically when using single selection mode.
Attaching the file, when pressing F12, other data from the tree disappears.

Request to please resolve this issue or suggest the changes in JS/css file.

How to get id value in post form

Hi, how to get id value in post from?

Thank you

deselect parent

Hi!
I'm using your plugin in one of my websites and it's great! :)
I'd like to know if you can help me.
When I select a parent, all the children get selected. That's good!
But when I deselect one child, the parent is not deselected. I think the parent wouldn't be selected. Is it possible to do that?
I attach you a [https://ibb.co/sV8vndk]picture of this problem.
I hope you could help me.
Thanks!

reset

hi. i would like reset clear but i have bug. i try it.
compartments is array with all ids

compartments.forEach(function(element) {
$(input[data-id="${element}"]).prop('checked',false);
});
compartments = new Array();
$('#form_compartments').val('');

bug keep in memory the choice

thanks

How to get selected id on changed for each combotree instance?

I have multi input with class "dropdown" on page. I init comboTree for all dropdown successfull with this code:

$(".dropdown").comboTree({
        source: productStoreFullJson,
        isMultiple: false,
        onChange: function () {
            console.log($(this).getSelectedIds());
        }
});

I want add a event onChange for get selected id when each dropdown change it's selected value. I use bellow codes:

$(".dropdown").comboTree({
        source: productStoreFullJson,
        isMultiple: false,
        onChange: function () {
            console.log($(this).getSelectedIds());
        }
});

However onChange event not work, please help me correct this. Thanks!

Popup list dissapeares if I change the selection manualy

I test it here,

https://www.jqueryscript.net/demo/Drop-Down-Combo-Tree/

I select something from the 3rd combo box. I change the textbox content with keyboard, click enter. The list is now disapeared

Hover to search result

How can I hover to search result when using live search?

when data lacks ID, drop-down arrow icon disappears

I'm not sure why this is happening, but if the JSON data lacks an ID for each element, the plugin still works well, but the downward pointing icon doesn't show up.

I don't want/need my data to have an ID, and don't want to synthesize one either.

How to re-init a combotree after destroy it?

I want re-init a combotree after destroy it. How i do it?

Eg1: init on focus and destroy on blur:

var SampleJSONData = [
    {
        id: 0,
        title: 'Horse'
    }, {
        id: 1,
        title: 'Birds',
        isSelectable: false,
        subs: [
            {
                id: 10,
                title: 'Pigeon'
            }, {
                id: 11,
                title: 'Parrot'
            }, {
                id: 12,
                title: 'Owl'
            }, {
                id: 13,
                title: 'Falcon'
            }
        ]
    }, {
        id: 2,
        title: 'Rabbit'
    }, {
        id: 3,
        title: 'Fox'
    }, {
        id: 5,
        title: 'Cats',
        isSelectable: false,
        subs: [
            {
                id: 50,
                title: 'Kitty'
            }, {
                id: 51,
                title: 'Bigs',
                isSelectable: false,
                subs: [
                    {
                        id: 510,
                        title: 'Cheetah'
                    }, {
                        id: 511,
                        title: 'Jaguar'
                    }, {
                        id: 512,
                        title: 'Leopard'
                    }
                ]
            }
        ]
    }, {
        id: 6,
        title: 'Fish'
    }
];

var comboTree1;
jQuery(document).ready(function ($) {
    $('#justAnInputBox').focus(function () {
        comboTree1 = $('#justAnInputBox').comboTree({
            source: SampleJSONData,
            isMultiple: true,
            cascadeSelect: false,
            collapse: true
        });
    }).blur(function () {
        comboTree1.destroy(); --> Cannot read property 'destroy' of undefined
    });
});

Eg2:

//Init comboTree --> success
comboTree1 = $('#justAnInputBox').comboTree({
    source: SampleJSONData,
    isMultiple: true,
    cascadeSelect: false,
    collapse: true
});

// Remove plugin  --> success
comboTree1.destroy();

//Re-init comboTree --> NOT WORK
comboTree1 = $('#justAnInputBox').comboTree({
    source: SampleJSONData,
    isMultiple: true,
    cascadeSelect: false,
    collapse: true
});

Look forward to your feedback. Thanks!

comboTree1.destroy is not a function

Hello Erhanfirat,

Your plugin is great! However I has a problem when call Destroy method,
How to call the destroy function properly?
I use your demo code but it did not perform successfully:

var SampleJSONData = [
    {
        id: 0,
        title: 'Horse'
    }, {
        id: 1,
        title: 'Birds',
        subs: [
            {
                id: 10,
                title: 'Piegon'
            }, {
                id: 11,
                title: 'Parrot'
            }, {
                id: 12,
                title: 'Owl'
            }, {
                id: 13,
                title: 'Falcon'
            }
        ]
    }, {
        id: 2,
        title: 'Rabbit'
    }, {
        id: 3,
        title: 'Fox'
    }, {
        id: 5,
        title: 'Cats',
        subs: [
            {
                id: 50,
                title: 'Kitty'
            }, {
                id: 51,
                title: 'Bigs',
                subs: [
                    {
                        id: 510,
                        title: 'Cheetah'
                    }, {
                        id: 511,
                        title: 'Jaguar'
                    }, {
                        id: 512,
                        title: 'Leopard'
                    }
                ]
            }
        ]
    }, {
        id: 6,
        title: 'Fish'
    }
];

comboTree1 = $('.size').comboTree({
	source : SampleJSONData,
	isMultiple: true,
	cascadeSelect: true,
	selected: ['0']
});

// To remove plugin
comboTree1.destroy();
===> comboTree1.destroy is not a function

1. How to call the destroy function properly?
2. Can I destroy all comboTree at one, For example: $('.size').comboTree('destroy');
   Note: I have multi elems with class is "size" on page.

style.css

I add to .comboTreeDropDownContainer

z-index: 999;

Remove selected items

Hey everyone! How can i remove selected items from input?

selecting all sub items when selecting the parent.

@kirlisakal is it possible to select all the sub-items when selecting the parent item? something like this https://www.jqueryscript.net/demo/Collapsible-Tree-View-Checkboxes-jQuery-hummingbird/

and need to get all selected checkbox ids in the getselecteditem variable

How to use this plugin in React component ?

I tried using this https://reactjs.org/docs/integrating-with-other-libraries.html to integrate this plugin in React but it didn't helped.
Aslo I tried https://medium.com/@shuvohabib/using-jquery-in-react-component-the-refs-way-969de9aa651f too but this shows error.
TypeError: this.$el.comboTree is not a function

My code looks like this -

import React, { Component } from "react";
import _ from "lodash";
import { findDOMNode } from "react-dom";
import $ from "jquery";

var SampleJSONData = [
  {
    id: 0,
    title: "Horse",
  },
  {
    id: 1,
    title: "Birds",
    isSelectable: false,
    subs: [
      {
        id: 10,
        title: "Pigeon",
        isSelectable: false,
      },
      {
        id: 11,
        title: "Parrot",
      },
      {
        id: 12,
        title: "Owl",
      },
      {
        id: 13,
        title: "Falcon",
      },
    ],
  },
  {
    id: 2,
    title: "Rabbit",
  },
  {
    id: 3,
    title: "Fox",
  },
  {
    id: 5,
    title: "Cats",
    subs: [
      {
        id: 50,
        title: "Kitty",
      },
      {
        id: 51,
        title: "Bigs",
        subs: [
          {
            id: 510,
            title: "Cheetah",
          },
          {
            id: 511,
            title: "Jaguar",
          },
          {
            id: 512,
            title: "Leopard",
          },
        ],
      },
    ],
  },
  {
    id: 6,
    title: "Fish",
  },
];

class SearchTreeView extends Component {
  componentDidMount() {
    const el = findDOMNode(this.refs.justAnotherInputBox);
    $(el).comboTree({
      source: SampleJSONData,
      isMultiple: false,
    });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          id="justAnotherInputBox"
          placeholder="Type to filter"
          autocomplete="off"
          ref="justAnotherInputBox"
        />
      </div>
    );
  }
}

export default SearchTreeView;

Return ids only after done cascading

I'm using ComboTree to filter data in php. The way it currently works when cascading is, that the array of selected ids grows one by one and it then makes the Ajax call multiple times. I think it would be better if the selected ids (or names) are returned only after the array is fully built when cascading a selection. I tried to modify the code, but it's beyond my knowledge. Any help appreciated.

setSelection in 1.3.1

There's a bug in 1.3.1 with setSelection.
On line 171 you add an extra 'ct-' for the id of the element ('ct-' is already part of this.id).
On line 670 "-li" shoud be "-li-"

Filter On Multi Selection

Seems like the Filter functionality CANNOT work with Multi Selection mode. Any chance to fix it?

how to disselect the selected option in single valued tree ( isMultiple = false ) ?

I have a combo tree with multiselect false.
If i select an option in single select tree and want to clear selection right there (i.e., not through any external button click to clear).

In my case, there are categories say,
cat 1 (id=1)
cat 1.1 (id=2)
cat 1.1.1 (id=3)
cat 1.2 (id=4)

--> if i select 'cat 1' with id=1, then clear the option( i.e., by using Backspace in keyboard) and send the form
--> when I click send form then it sends value with id=1 ( 'cat 1' option) instead of null

So, is there any function or feature that can clear selected value in single select tree.

Thanks.

How to check some checkboxes when init tree?

in multiselect mode...

Thnx

Change Colors...

I need to be able to change the color of the text on the checkbox list. Anyone have an idea on how to do that?

Combo Tree On safari not working

Hi All
I am using ComoTree plugin it is working well on all browsers except safari
anyone can Help with this issue
thanks in advanced

How to filter in single tree?

Hi!, recently used this plugin and it's ways perfect, just I try to use the filter option in the single tree but I can't, How can I implement this option? Is it possible?.
Thanks!

Issue with Duplicate Title

Hi,

I am using this plugin and I found an issue that is item with same title and different id is not selectable.

How to get the selected value?

How can I get the selected value?

I have tried some way:

    var comboTree1;
    jQuery(document).ready(function($) {
        comboTree1 = $('#justAnInputBox').comboTree({
            source : SampleJSONData,
            isMultiple: true,
            cascadeSelect: true,
            collapse: true,
            selectableLastNode: true,
            selected: selectedItem
        });
        var selectedTitles = comboTree1.getSelectedItemsTitle();
        console.log('selectedTitles: ' , selectedTitles);
        var selectedIds = comboTree1.getSelectedItemsId();
        console.log('selectedIds: ' , selectedIds);
    });
    
    Getting error as:
    jQuery.Deferred exception: comboTree1.getSelectedItemsTitle is not a function TypeError: comboTree1.getSelectedItemsTitle is not a function

Is there any way to get the selected value/ids ?

Start collapsed

Hi there, thanks for the great plugin.
I'm using ComboTree for quite a large data set. I would like the tree to be initialized collapsed and to allow users to expand categories.

Please advise me how to best do this.
Thank you

combobox scrolling

When i set selected value from combobox intialization then it is showing selected but when i open the combobox then it is not scroll to the selected item, instead of that it is showing first item.

Can you please check that?

clearSelection is not working on single Tree

I have set single tree using below code.
gunBtreeinstance = jq('#gunBrokerTree').comboTree({
source : data.categoryData,
isMultiple: false
});
and trying to reset filter of this comboTree using clearSelection but not wokring.
gunBtreeinstance.clearSelection();

setSelection is also not working for resting filter like gunBtreeinstance.setSelection(['0']) or gunBtreeinstance.setSelection('0')

Please help for single tree.
Thanks

Select All

Hello

We're using this component for multiselect on a WP website - it's working perfectly.

One thing we've been asked for is a 'Select All' option. I know I can do this manually outside of the component, but I notice that you have a 'Select All' option on your development roadmap. Happy to wait for this - or have a go myself.

Do you have a plan to add this soon? If you'd like me to have a go at implementing within the component - do you have a suggestion as to where you think it should appear? I can code but I'm not the worlds best designer and would hate to mess up a really well thought out add on.

Cheers Rod

Filter functionality doesn't seem to work

I am getting error as attached while performing a filter. Tree is being loaded correctly and selection, deselection works fine. Search text given is 6 . Have added comboTreePlugin.js & icontains.js. Please help.

$('#chkBoxTree').comboTree({ source: SampleJSONData, isMultiple: true });

Set Source from c# asp.net code behind

I can't set source of the tree from c# asp.net code behind, the plugin either not working or don't create items and just shows filter field...

How to setValues(check the items) dynamically using jQuery

Is there any option to setValues like

$('#MenuTree').val(numbersArray) or $('#MenuTree').comboTree('setValues',numbersArray);

...
I need this to show previously selected values in my edit page....

How to deal of setSelection method when parent and child have the same id for dynamic data?

Please see the attached sample data for the understanding purpose:-

var SampleJSONData = [
    {
        id: 0,
        title: 'Horse'
    }, {
        id: 1,
        title: 'Birds',
		isSelectable: false,
        subs: [
            {
                id: 10,
                title: 'Pigeon',
				isSelectable: false
            }, {
                id: 1,
                title: 'Parrot'
            }, {
                id: 12,
                title: 'Owl'
            }, {
                id: 13,
                title: 'Falcon'
            }
        ]
    }];

Here you can see that for time being if id:1 with the title: Birds, and again their children with id:1 with the title 'Parrot', I have done manually since In my project I am using dynamic data that is coming from the backend. And If I am giving setSelection(['1']), then it is only selected the parent but In my case, I want to select always their child. And Parent is no more selected.

How I can achieve this? It is a great help.

use html tag in combo-tree instead of json data

hi . thanks for jquery plugin ,
i have a question ,
can i use html tag with ul & li tag and .... with my data instead of json data ?

Event firing when drop-down is closed?

Hi,

First and foremost, great plugin!

In my use case I'd like to get the selected ids only after the drop-down has closed (not onChange). Is that possible?
(I've previously used another similar plugin with event onDropdownHide, but that plugin won't work in this use case).

How to get data-id from selected option

when user select an option from drop down list, how to get the data-id from that correspond selected option? thanks.

Initialize Value

how we can Initialize Value?
like this:
http://www.jeasyui.com/demo/main/index.php?plugin=ComboTree&theme=default&dir=ltr&pitem=

Thank You

change event issues

Thank You for opened Your PlugIn
But
Change event issue when the same value is selected

`
ComboTree.prototype.refreshInputVal = function () {
        var tmpTitle = "";
        var oldTitle = this._elemInput.val();
        
        if (this.options.isMultiple) {
            for (var i=0; i<this._selectedItems.length; i++){
                tmpTitle += this._selectedItems[i].title;
                if (i<this._selectedItems.length-1)
                    tmpTitle += ", ";
            }
        }
        else {
            tmpTitle = this._selectedItem.title;
        }

        this._elemInput.val(tmpTitle);
        
        if (tmpTitle != oldTitle) {
        	this._elemInput.trigger('change');
        	if (this.changeHandler)  {
        		this.changeHandler();
        	}
        }
    };
`

Looks Like Need Above Code
Thank You for opened Your PlugIn Again!