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

const users = [  
  {  
  	"id": 1,  
  	"first_name": "Sigismund",  
  	"last_name": "Pople",  
  	"email": "spople0@reverbnation.com",  
  	"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}

<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}

<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}