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