# @freshleafmedia/multi-list-control

> ## Overview

Latest version **1.1.1** (published 2019-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @freshleafmedia/multi-list-control
pnpm add @freshleafmedia/multi-list-control
yarn add @freshleafmedia/multi-list-control
bun add @freshleafmedia/multi-list-control
```

## 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.1 |
| Published | 2019-11-15 |
| First published | 2019-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Joe Strong |
| Maintainers | freshleaf |

## Links

- npm: https://www.npmjs.com/package/@freshleafmedia/multi-list-control
- Repository: https://github.com/freshleafmedia/multi-list-control
- Homepage: https://github.com/freshleafmedia/multi-list-control#readme
- Issues: https://github.com/freshleafmedia/multi-list-control/issues
- npm.io page: https://npm.io/package/@freshleafmedia/multi-list-control

## Recent versions

- 1.1.1 (latest) — 2019-11-15
- 1.1.0 — 2019-10-31
- 1.0.0 — 2019-10-29
- 0.3.0 — 2019-10-28
- 0.2.0 — 2019-10-17
- 0.1.1 — 2019-10-16

## README

# Multi-List-Control

## Overview

A wrapper around a HTML multi-select to provide:

- Selecting items by adding and removing items from a visual list
- Drag and Drop ordering
- Adding suggested options via AJAX

## Install

```javascript
npm install multi-list-control
```

## Usage

```javascript
import MultiListControl from 'multi-list-control';

const el = document.querySelector('#mySelect');
new MultiListControl(el);
```

## Available Options

Specify options as an object as the second parameter e.g. `new MultiListControl(el, options)`

### ajaxOptions

**Type:** `Function` **Default:** `null`

A function executed when performing a suggestions search.

The MultiListControl instance is available as the first parameter, and as `this`.

**Example:**

```javascript
new MultiListControl(el, {
  ajaxOptions: (multiListControl, query, callback) => {
    Axios.get('ajax?query=' + query).then(response => {
      callback(response.data);
    })
  },
});
```

### maxSelected

**Type:** `Integer` **Default:** `null`

Specifies the max number of items to allow to be selected.

**Example:**

```javascript
new MultiListControl(el, {
  maxSelected: 3
});
```

### searchDebounce

**Type:** `Integer` **Default:** `300`

Number of milliseconds to debounce the search suggestions

**Example:**

```javascript
new MultiListControl(el, {
  searchDebounce: 300
});
```

### markup.item

**Type:** `Function` **Default:** `Function`

A function that returns the template used for the markup of each list item

**Example:**

```javascript
new MultiListControl(el, {
  markup: {
    item: option => `<div class="MultiList__Item"><span>${option.name}</span><span class="MultiList__Close">x</span></div>`
  }
});
```

### data

**Type:** `Array` **Default:** `null`

A list of keys of additional data to accept. The data can be read from a data-attribute and from an ajax response.

The data can be used when rendering using the `markup` option, and can be retreived when using the `getSelected` method

```javascript
new MultiListControl(el, {
  data: ['description']
});
```

### strings

**Type:** `Object`

A list of strings that are used in the component.

The example below lists the defaults.

```javascript
new MultiListControl(el, {
  strings: {
    searchPlaceholder: 'Search...',
    maxSelectedError: 'You cannot select more than # items',
    noneSelected: 'No items selected'
  }
});
```

## Supported Browsers

- Chrome
- Firefox
- Edge
- Safari
- Opera
- Internet Explorer 11

## Methods

### getSelected()

**Return:** `Map`

Returns a `Map` of selected options

```javascript
const multiList = new MultiListControl(el);
multiList.getSelected();

// Returns: Map([{id: 1, name: 'item'}])
```

### reset()

Resets the selected items to its initial state, and resets the selector's search

```javascript
const multiList = new MultiListControl(el);
multiList.reset();
```

---
_Source: https://npm.io/package/@freshleafmedia/multi-list-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._