Svelte typeahead / auto-completion component for sync and async data

install it

npm i --save @dimitrilahaye/svelte-typeahead

Use it

<scrip>
    import TypeAhead from '@dimitrilahaye/svelte-typeahead';
    
    //...
</script>

Table of contents

• Examples
  • Example with an array of objects
  • Example with an array of strings
  • Example with fetched data from an API
• Documentation
  • Props
  • TypeAhead configuration
  • Events

• Unit test
• Storybook

Examples

Example with an array of objects

<script>  
import TypeAhead from '@dimitrilahaye/svelte-typeahead';  

const users = [  
  {  
      "id": 1,  
      "first_name": "Sigismund",  
      "last_name": "Pople",  
      "email": "[email protected]",  
      "gender": "Male",  
  },
  ...
];  
 const props = {  
  items: users,  
  value: 'id',  
  searchData: (user, str) => user.first_name.includes(str),  
  optionFunction: (o) => `${o.first_name} ${o.last_name}`,  
};  
 let selectedUsers = [];
</script>   
<TypeAhead {...props}  
    on:selectitem="{(e) => selectedUsers = [...e.detail.items]}"  
    on:reset="{() => selectedUsers = []}"  
    on:clearitem="{(e) => selectedUsers = selectedUsers.filter((u) => u.id !== e.detail.item.id)}"
    />  
{#each selectedUsers as user (user.id)}  
    <p>{user.first_name} {user.last_name}</p>  
{/each}

Example with an array of strings

<script>
import TypeAhead from '@dimitrilahaye/svelte-typeahead';   
const countries = [  
  'Russia',  
  'Colombia',  
  'Sweden',  
  'China',
  ...
];  
const props = {  
items: countries,  
};  
let selectedCountriesSync = [];
</script>  
<TypeAhead {...props}  
  on:selectitem="{(e) => selectedCountriesSync = [...e.detail.items]}"  
  on:reset="{() => selectedCountriesSync = []}"  
  on:clearitem="{(e) => selectedCountriesSync = selectedCountriesSync.filter((c) => c !== e.detail.item)}"
  />  
{#each selectedCountriesSync as country}  
    <p>{country}</p>  
{/each}

Example with fetched data from an API

<script>  
import TypeAhead from '@dimitrilahaye/svelte-typeahead';
const asyncProps = {  
    isAsync: true,  
    value: 'alpha3Code',  
    placeholder: 'Type a country',  
    clearLabel: 'Clear countries list',  
    loadingText: 'Hurry go...',  
    noResultText: 'nope!',
    optionInput: 'name',  
    searchData: async (str) => {  
      const response = await fetch(`https://restcountries.eu/rest/v2/name/${str}`);  
      const countries = await response.json();  
      let selected;  
      if (response.ok) {  
          selected = countries.map((c) => {  
              return {  
                  name: c.name,  
                  alpha3Code: c.alpha3Code  
              };  
          });  
      } else {  
          selected = [];  
      }  
      return selected;  
  }
};  
const config = {  
  closeOnSelect: true,  
  resetButton: false,  
  multiple: false,  
};  
let selection = [];
</script>
<TypeAhead {...asyncProps} {config} bind:selection/>  
{#each selection as country (country.alpha3Code)}  
    <p>{country.name}</p>  
{/each}

Above, bind:selection is a shortcut which will reflect all the changes on the selected items. By this way, no need to use TypeAhead events.

Documentation

Props

TypeAhead configuration

If multiple is setted at true, closeOnSelect is always considered as false.

Events

Unit test

npm test
# then coverage report in ./ut-coverage

Storybook

npm run storybook
# then visit http://localhost:6006/