# ractive-multiselect

> A multiselect/tag component for ractive

Latest version **0.3.2** (published 2020-08-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install ractive-multiselect
pnpm add ractive-multiselect
yarn add ractive-multiselect
bun add ractive-multiselect
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2020-08-04 |
| First published | 2016-02-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 79.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Maintainers | dum |
| Keywords | ractive, component, multiselect |

## Links

- npm: https://www.npmjs.com/package/ractive-multiselect
- Repository: https://github.com/jondum/ractive-multiselect
- Homepage: https://github.com/jondum/ractive-multiselect#readme
- Issues: https://github.com/jondum/ractive-multiselect/issues
- npm.io page: https://npm.io/package/ractive-multiselect

## Dependencies (1)

- [ractive](https://npm.io/package/ractive.md) ^0.8.5

## Recent versions

- 0.3.2 (latest) — 2020-08-04
- 0.3.0 — 2016-12-06
- 0.2.9 — 2016-07-18
- 0.2.8 — 2016-07-18
- 0.2.7 — 2016-05-27
- 0.2.6 — 2016-04-28
- 0.2.5 — 2016-04-28
- 0.2.4 — 2016-04-19
- 0.2.3 — 2016-04-16
- 0.2.2 — 2016-04-15
- 0.2.1 — 2016-04-14
- 0.2.0 — 2016-04-14
- 0.1.1 — 2016-02-11
- 0.1.0 — 2016-02-11

## README

# ractive-multiselect

A `<multiselect>` component that allows full styling and customizability.

### Demo

[Live Demo](http://jondum.github.com/ractive-multiselect/demo/)

### Install


```
npm install ractive-multiselect --save
```

### Usage

Add the multiselect to your Ractive instance:

```js
Ractive.extend({
    ...
    components: {
        multiselect: require('ractive-multiselect')
    },
    ...
});
```

Use it like a normal multiselect element

```html
<multiselect value='{{ myValue }}'>
 {{#each options}}
 <option>{{this}}</option>
 {{/each}}
 <option>some other option</option>
</multiselect>
```

##### Custom Templates

Customize how rows in the dropdown and selected items are displayed through inline partials.

```html
<multiselect data='{{data}}'>
    {{#partial selectedItem}}
        {{ .name }}
    {{/partial}}
    {{#partial item}}
        <img src='{{.avatar}}'/>
        {{ .name }}
    {{/partial}}
</multiselect>
```

##### Groups

Data can be grouped

```html
<multiselect data='{{data}}'>
    {{#partial selectedItem}}
        {{ .name }}
    {{/partial}}
    {{#partial item}}
        {{ .name }}
    {{/partial}}
</multiselect>
```
```js
data = [
    {name: 'Zuchini', group: 'vegetables'},
    {name: 'Potatoes', group: 'vegetables'},
    {name: 'Oranges', group: 'fruits'},
    {name: 'Carrots', group: 'vegetables'},
    {name: 'Apples', group: 'fruits'},
    {name: 'Fruity Pebbles', group: 'cereals'},
    {name: 'Bananas', group: 'fruits'},
    {name: 'Broccoli', group: 'vegetables'},
    {name: 'Peaches', group: 'fruits'},
    {name: 'Cheerios', group: 'cereals'},
]
```


### API


`data` Populate the suggestions dropdown. Default `[]`

`selected` Array of selected items from `data`. Default `[]`

`autoClose` Close the dropdown upon making a selection. Default `false`

`consume`  Remove items from dropdown if they are a selected item. Default `true`I

`showCross` Show/Hide the X in the selected item. Default `true

`allowCustom` Allows custom items to be entered if no matches from `data`. Default: `true`

`clearFilterOnSelect` Clears whatever is typed into the filter input when a selection is made. Default `true`

---
_Source: https://npm.io/package/ractive-multiselect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._