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

Category: Form , Javascript | November 3, 2022
Author:dipson88
Views Total:1,199 views
Official Page:Go to website
Last Update:November 3, 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.mjs.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,
  // text to show if you use 'showTags'
  tagsCountText: '{count} {tagsCountText}',
  // shows remove icon
  clearable: true,
  // is searchable?
  searchable: true,
  // placeholder text
  placeholder: 'Search...',
  
  // text to display when no results found
  emptyText: 'No results found...',
  // converts multi-select to the single value select
  isSingleSelect: false,
  // returns groups if they selected instead of separate ids
  isGroupedValue: false,
  // It is impossible to select groups. You can select only leaves.
  disabledBranchNode: false,
  // auto, top, bottom
  direction: 'auto',
  // shows count of children near the group's name.
  showCount: false,
  // 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,
  // id attribute for the accessibility.
  id: '',
  // { arrowUp, arrowDown, arrowRight, attention, clear, cross, check, partialCheck }
  // object contains all svg icons
  iconElements: {},
  srcElement: null,
  // callback and functions
  inputCallback: undefined,
  openCallback: undefined,
  closeCallback: undefined,
  nameChangeCallback: undefined,
  mount: () => void,
  updateValue: (newValue: ValueOptionType[]) => void,
  destroy: () => void,
  focus: () => void,
  toggleOpenClose: () => void,
  
})

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();
// toggle between open & close
treeselect.toggleOpenClose();
// set focus on treeselect input without open/close state changes.
treeselect.focus();
// destroy the instance
treeselect.destroy();

Changelog:

v0.5.6 (11/03/2022)

  • Fix nameChangeCallback empty name.
  • Add read-only attribute for unsearchable mode. Hide keyboard for mobile devices.
  • Remove empty id from input element.
  • Fix the scroll position during key navigation with the slot.

v0.5.5 (11/01/2022)

  • Add selectedName field to the Treeselect class.

v0.5.4 (11/01/2022)

  • Fix: parent node selects for isSingleSelect mode if a parent has only one child node.
  • Add nameChangeCallback method.

v0.5.3 (10/15/2022)

  • Add class is-single-select to the input.
  • Add overflow to the placeholder.

v0.5.2 (10/04/2022)

  • Add text align for labels and checkbox icons.

v0.5.1 (10/03/2022)

  • Fix disabled prop resetting.
  • Fix direction prop wrong validation.

v0.5.0 (09/30/2022)

  • Added Direction prop
  • Added openCallback
  • Added closeCallback

v0.4.3 (09/08/2022)

  • Fix focus/blur behavior for visibility/display style changes.

v0.4.2 (09/06/2022)

  • Add isGroupedValue prop.
  • Add disabledBranchNode prop.
  • Add title to the selected value in isSingleSelect mode.
  • Add styles for selected value inside the list.
  • Fix tab navigation bug. (You couldn’t unfocus element).

v0.4.1 (09/05/2022)

  • Fix keyboard focus issues.
  • Add prevent enter key for correct forms work.

v0.4.0 (09/05/2022)

  • Add isSingleSelect prop.
  • Add showCount prop.
  • Rename main files form treeslecet-js to treeselectjs.

v0.3.6 (08/24/2022)

  • Remove invisible input line for unsearchable mode.
  • Swap event listeners with callbacks.
  • Move Input element to the tags list.
  • Unsearchable mode input fix.

v0.3.3 (07/29/2022)

  • Remove swc/helpers dependency.

v0.3.2 (07/28/2022)

  • added dependency

v0.3.1 (07/23/2022)

  • Typescript support.
  • New props were added: id, iconElements, inputCallback.
  • ES modules and CommonJS support were added.
  • Ability to use numbers as value.
  • iconElements – Now we can create a component to reset default icons.
  • Code refactoring.
  • Build with browserlist (“> 0.5%, last 2 versions, not dead”).
  • Package size was minimized.

v0.2.9 (07/07/2022)

  • Add tagsCountText prop.
  • Fix the wrong input value if the user tries to remove the tag from input.
  • Add toggleOpenClose and focus methods.

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