About

The Drop Down Tree plugin is an easy-to-use JavaScript plugin for classifying transmitted data. The plugin displays a select box which embeds a drop down tree. The Drop Down Tree plugin is used to provide an "autocomplete" feature on input elements. Users will see a drop-down tree of pre-defined options as they input data.
Key Benefits:

  • Collapsible tree view: feature of collapse/expand tree elements
  • Autocomplete, filter and search works correctly under all browsers including Edge, old and new versions of Safari, Opera, Internet Explorer, etc.
  • Appearance is easy customizable using CSS and responsive design.
  • Returns the id of the selected item instead of text.
Screenshoot
Installation and Activation
Installation and Activation
Source modification
Source modification
Deactivation
Deactivation
Remove Plugin
Remove Plugin
About Plugin
About Plugin
Usage
Admin Menu
Admin Menu
Shortcode
Shortcode
Plugin Settings
Plugin Settings
Usage

A window with tree members will be opened by clicking on the arrow.
You can expand/collapse tree nodes clicking on the icon in front of the appropriate item:


Clicking on tree node, that item will be selected and will appear in the input. After opening tree again, you can see that item still selected:


When you type in the search box Drop Down Tree will show you all the matching records (For example, when you type “A” it gives you all the names with the alphabet A in it).


Drop Down Tree have a useful feature that allows you to expand or collapse the nodes, if you set true the parameter which enables or disables this feature. With each node you interact with, you can work with one item individually, or expand and collapse the entire field at once. These features are available in the right-click menu. Just select item in the tree, press the right-click and use “Expand entire field”, and “Collapse Entire field” menu items with left-click.


The call of Drop Down Tree plugin is made in the following way:

$(document).ready(function() {
var tree = [
{id: 1, parent_id: 0, name: "My Company"},
{id: 2, parent_id: 1, name: "IT"},
{id: 3, parent_id: 2, name: "Team lider(Caesar Vance)"},
{id: 4, parent_id: 3, name: "Programmers"},
{id: 5, parent_id: 4, name: "Airi Satou"},
{id: 6, parent_id: 4, name: "Ashton Cox"},
{id: 7, parent_id: 2, name: "Hardware"},
{id: 8, parent_id: 7, name: "Angelica Ramos"},
{id: 9, parent_id: 1, name: "Sales"},
{id: 10, parent_id: 9, name: "Sales manager"},
{id: 11, parent_id: 10, name: "Angelica Ramos"},
{id: 12, parent_id: 10, name: "Cedric Kelly"}
];
var params = [{
data: tree,
filter: false,
open: true,
closed: 'closed',
opened: 'opened',
nochild: 'nochild',
select: 'selected',
col_ex: true
color: '#6c00a3',
text_color: 'black',
selected_text_color: '#f7c8ea'
}];
$('.be_tree').comboboxTree(params); });

$('.BE_tree').comboboxTree(params) Where params is the JQuery object including tree data and settings. The detailed example of params is the following:

  • data:the array transmitted to our tree. An alert window will appear and will warn about the mistake, if you don’t pass the array to the plugin.
  • filter:Hide/show search input. Decides either enable searching or not. Possible values: true or false. Default value: true
  • open:the initial state of tree: to be closed or opened. Possible values: true or false. Default value: false
  • closed:a default class for “closed” icon of tree in embedded CSS. Can be changed with the class passed by user. Type is string.
  • opened:a default class for “opened” icon of tree in embedded CSS. Can be changed with the class passed by user. Type is string.
  • nochild:a default class for icon of tree showing that there is no sub-level under it in embedded CSS. Can be changed with the class passed by user. Type is string.
  • select:a default class for the selection of tree members in embedded CSS. Can be changed with the class passed by user. Type is string.
  • col_ex:Enable/disable collapse/expand feature. Decides either enable collapse/expand feature or not. Possible values: true or false. Default value: true
  • color: The color of plugin. Possible values: color name "black", HEX "#6c00a3". Default value: black.
  • text_color: The color of text. Possible values: color name "black", HEX "#000000". Default value: black.
  • selected_text_color: The color of selected row. Possible values: color name "black", HEX "#f7c8ea". Default value: black.

Please note: Only data parameter is mandatory. All other parameters have default values.