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.

import AutoComplete from 'svelte-autocomplete'

export default {
  components: {
    AutoComplete,
	...
  }
}

And then use it like so:

<AutoComplete class="input" name="fruits" items="{fruits}" minChar="1" />

<AutoComplete name="countries" items="{countries}" isAsync on:input="loadApiData(event)">
  <div class="notification">Loading data from API...</div>
</AutoComplete>

Options

| 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

Slots

| 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:

<script src="svelte-autocomplete/dist/index.js"></script>

create component like so:

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