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

Slots

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: [...]
  }
})