# @cartok/hierarchy-select
> Hierarchy Select jQuery Plugin for Twitter Bootstrap
Latest version **1.1.14** (published 2018-11-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install @cartok/hierarchy-select
pnpm add @cartok/hierarchy-select
yarn add @cartok/hierarchy-select
bun add @cartok/hierarchy-select
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.14 |
| Published | 2018-11-09 |
| First published | 2017-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Evgeniy NeoFusion |
| Maintainers | cartok |
| Keywords | bootstrap, bootstrap plugin, jquery, jquery plugin, plugin, autocomplete, hierarchy |
## Links
- npm: https://www.npmjs.com/package/@cartok/hierarchy-select
- Repository: https://github.com/cartok/hierarchy-select
- Homepage: https://github.com/cartok/hierarchy-select.git
- Issues: https://github.com/NeoFusion/hierarchy-select/issues
- npm.io page: https://npm.io/package/@cartok/hierarchy-select
## Alternatives
- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
## Recent versions
- 1.1.14 (latest) — 2018-11-09
- 1.1.15 — 2018-08-16
- 0.0.6 — 2017-09-25
- 0.0.5 — 2017-09-25
- 0.0.4 — 2017-08-29
- 0.0.1 — 2017-08-29
## README
# Hierarchy Select jQuery Plugin for Twitter Bootstrap
[a link to the original project for guidance](https://travis-ci.org/NeoFusion/hierarchy-select)
## Requirements
* **a bundeling system like webpack**
* jQuery
* bootstrap
## Installation
```java
npm install bootstrap@3 jquery@3 @cartok/hierarchy-select
```
## Usage
### Restriction
You should only use this module inside of a build environment (ES6 module).
### Import and apply the plugin to jQuery
```javascript
import "jquery"
import "bootstrap"
import hierarchySelect from "@cartok/hierarchy-select"
import "bootstrap/dist/css/bootstrap.css"
import "@cartok/hierarchy-select/build/hierarchy-select.css"
hierarchySelect($)
```
### Example usage
```javascript
/**
* create the base html code and append it somewhere.
* @unwritten-feature: the html could be provided later from inside the plugin
*/
const html = new NodeTemplate(`
`)
document.body.appendChild(html.fragment)
/**
* Use HierarchySelect on the html and pass in options and a function
* that creates the entries of the select view.
* If you want the select to have a default selection on DOM-load you need
* a function that creates entries with one of them having the 'data-default-selected' attribute.
* But you can just take out the whole function code and execute it afterwards.
*/
$(html.root).hierarchySelect({
hierarchy: false,
togglePosition: false,
keepFocused: false,
}, () => {
// id attributes are optional and will be autofilled in the updateSelect() function.
const data = [{
id: 0,
text: "Label A"
},{
id: 1,
text: "Label B"
},{
id: 3,
text: "Long John Silver!"
},{
id: 4,
text: "This is the longest label in the world!"
},{
id: 5,
text: "Another long sentence containing the word 'world'!"
},]
;(function updateSelect(entries){
// remove all entries from select.
html.refs.list.innerHTML = ""
// check if every entrie-object has an id, else create it.
entries = entries.every(l => l.id instanceof Number)
? entries
: entries.map((l, idx) => Object.assign(l, { id: idx }))
// create html node from entries-array.
const entriesFragment = document.createDocumentFragment()
entries.forEach((e, idx) => {
let entry = undefined
if(idx === 0){
// the first node gets selected by the plugin via data attribute.
entry = new NodeTemplate(`
`)
}
entriesFragment.appendChild(entry.fragment)
})
html.refs.list.appendChild(entriesFragment)
})(data)
})
```
### Usage additions
#### How-to react on selection change?
```javascript
$(html.root).on("change", (e, data) => {
// The change event is triggered manually by the plugin through jQuery.
// But it will also be triggered natively.
// Only if the event was triggered by the plugin, you will get the text of the selection.
if(data !== undefined){
console.log("You can use the selected dropdown text and id on selection like this.")
console.log(data)
}
})
```
#### How-to open the dropdown on shortcut?
```javascript
$(window).on("keydown", (e) => {
if(event.getModifierState("Control")){
event.preventDefault()
if(e.key.toLowerCase() === "l"){
e.preventDefault()
e.stopPropagation()
html.refs.button.click()
}
}
})
```
## How to develop
Start the http-server for testing the example page for [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). Navigate to the examples folder and open the html file.
Use a browser that supports async ES6 module loading via script tag.
[*compability list*](https://caniuse.com/#feat=es6-module)
**Suggestion:** Use Chrome >= 62
```
node node_modules/.bin/http-server
```
---
_Source: https://npm.io/package/@cartok/hierarchy-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._