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


npm install svelte-autocomplete


Import the component directly in your Svelte project.

import AutoComplete from 'svelte-autocomplete'

export default {
  components: {

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>


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


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

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes