Multi-Select Box With Tree Structured Data Dropdown List – Treeselect

Category: Form , Javascript | July 2, 2022
Author:dipson88
Views Total:12 views
Official Page:Go to website
Last Update:July 2, 2022
License:MIT

Preview:

Multi-Select Box With Tree Structured Data Dropdown List – Treeselect

Description:

A user-friendly multi select JS library that allows the user to select single or multiple options from a tree-style hierarchical dropdown list.

See Also:

How to use it:

1. Import the Treeselect’s JavaScript and Stylesheet.

<link rel="stylesheet" href="./dist/treeselect-js.css" />
import Treeselect from '../dist/treeselect-js.js';

2. Create an empty DIV container to hold the Multi-Select dropdown box.

<div class="example" />
</div>

3. Define your nested options as follows:

const options = [
  {
    name: 'JavaScript',
    value: 'JavaScript',
    children: [
      {
        name: 'React',
        value: 'React',
        children: [
          {
          name: 'React.js',
          value: 'React.js',
          children: []
          },
          {
          name: 'React Native',
          value: 'React Native',
          children: []
          }
        ]
      },
      {
        name: 'Vue',
        value: 'Vue',
        children: []
      }
    ]
  },
  {
    name: 'HTML',
    value: 'html',
    children: [
      {
        name: 'HTML5',
        value: 'HTML5',
        children: []
      },
      {
        name: 'XML',
        value: 'XML',
        children: []
      }
    ]
  }
]

4. Initialize the Treeselect and populate the Multi-Select dropdown box with the data you just created.

const treeselect = new Treeselect({
  parentHtmlContainer: document.querySelector('.example'),
  options: options,
})

5. Available options to customize the Treeselect.

const treeselect = new Treeselect({
  // parent container element
  parentHtmlContainer: HTMLElement,
  // an array of option values
  value: [],
  // define your options here
  options: [],
  // keep the tree select always open
  alwaysOpen: true,
  // open all options to this level
  openLevel: 0,
  // append the Treeselect to the body
  appendToBody: false,
  // shows selected options as tags
  showTags: true,
  // shows remove icon
  clearable: true,
  // is searchable?
  searchable: true,
  // placeholder text
  placeholder: 'Search...',
  emptyText: 'No results found...'
  // group options
  grouped: true,
  // element that appends to the end of the dropdown list
  listSlotHtmlComponent: null,
  // is dropdown list disabled?
  disabled: false,
  // add the list as a static DOM element
  // this prop will be ignored if you use appendToBody.
  staticList: false,
  
})

6. Trigger a function every time an option has been selected.

treeselect.srcElement.addEventListener('input', (e) => {
  console.log(e.detail)
})

7. API methods.

// update options
treeselect.updateValue(Array[String]);
// remount and update settings
treeselect.mount();
// destroy the instance
treeselect.destroy();

Changelog:

v0.2.8 (07/02/2022)

  • Bug Fixes

v0.2.7 (06/30/2022)

  • Add staticList prop.
  • Fix resize bug for the appendToBody prop.
  • Fix code misspellings.

v0.2.6 (06/29/2022)

  • Fix: a bug that is related to the wrong partial checkbox check.
  • Method for the list position was updated.
  • Fix: a bug related to the wrong position for the list on blur if alwaysOpen prop is selected.
  • Added validation message for duplicate values.

You Might Be Interested In:


Leave a Reply