# Tiny Components - Select
Created with [Riot.js](https://riot.js.org). Select Field Element, Filter-Option to connect a [Observable](https://github.com/riot/observable). Using Styles for UI from [Plain-UI](https://plain-ui.com)

Source: [https://git.node001.net/tiny-components/select](https://git.node001.net/tiny-components/select)  

## Installation

Setup this registry in your project .npmrc file:

```
@tiny-components:registry=https://git.node001.net/api/packages/tiny-components/npm/
```

Install with npm or yarn

```
npm i --save @tiny-components/select
yarn add @tiny-components/select
```

## How to use

```
<tiny-field-select></tiny-field-select>
```

### Attribute: multiple

Select Multiple Options

### Attribute: searchable

Show Input-Field for Filtering Options, only works if Observable as Store is added and has Function Query.

### Props: options

Default Options for Start

### Props: store

```
import observable from '@riotjs/observable'

let store = observable({
    locations: [{
        'label' : 'A',
        'value' : 'a'
    },{
        'label' : 'B',
        'value' : 'b'
    },{
        'label' : 'C',
        'value' : 'c'
    },{
        'label' : 'D',
        'value' : 'd'
    },{
        'label' : 'E',
        'value' : 'e'
    },{
        'label' : 'F',
        'value' : 'f'
    },{
        'label' : 'G',
        'value' : 'g'
    },{
        'label' : 'H',
        'value' : 'h'
    },{
        'label' : 'I',
        'value' : 'i'
    },{
        'label' : 'J',
        'value' : 'j'
    }],

    query(value) {
        if (value !== undefined) {
            const results = []

            // run through locations and check string contains value
            for (let i = 0; i < this.locations.length; i++) {
                if (this.locations[i].value.includes(value)) {
                    results.push(this.locations[i])
                }
            }

            this.trigger('update', results)
        } else {

            // if value is undefined, adding all locations
            this.trigger('update', this.locations)
        }
    }
})
```