svelte-autocomplete

Lightweight typeahead / autocomplete component made with Svelte.js

* no dependencies
* can handle asynchronous data
* use plain lists or key / value pairs

#### Try the demo at http://svelte-autocomplete.surge.sh/

Install

npm install svelte-autocomplete

Usage

Import the component directly in your Svelte project.

```javascript
import AutoComplete from 'svelte-autocomplete'

export default {
components: {
AutoComplete,
...
}
}
``
And then use it like so:

``html





``

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| name | String | - | Form input name
| class | String | - | Additional styles for input element
| items | Array | - | Array with items, can be a plain list or key, value pairs
| isAsync | Boolean | false | If retrieving API data asynchronously
| minChar | Number | 2 | Min. characters to type before popup shows
| maxItems | Number | 10 | Max. items to show in popup
| fromStart | Boolean | true | Match from the start or anywhere in the string

$3

| Slot | Prop dependencies | Description |
|------|-------------------|-------------|
| default | isAsync | custom loading indication |




Made with Svelte


It's made with Svelte, which means you don't need any JS framework. Just use the dist/index.js file in any Javascript project:

include the bundle:

``html

``
create component like so:

``javascript
const myComponent = new AutoComplete({
target: document.querySelector('#app'),
data: {
name: 'fruits',
itemStart: 1,
items: [...]
}
})
```