svelte-autocomplete

A lightweight typeahead / autcomplete component built with Svelte

Usage no npm install needed!

<script type="module">
  import svelteAutocomplete from 'https://cdn.skypack.dev/svelte-autocomplete';
</script>

README

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