Autocomplete

Autocomplete allows you to have a text field input which can use the entered string to search for potential completion options. The search function can make an API request, filter local data, generate options on the fly, or anything that returns a list of results.

<script>
import { Autocomplete } from '@thetinkerinc/colibri';

import style from './style.js';

let value;

async function getOptions(search) {
	const resp = await fetch(
		`https://gutendex.com/books?search=${encodeURIComponent(
			search
		)}`
	);
	const json = await resp.json();
	return json.results;
}

function getDisplay(item) {
	if (item.title.length > 50) {
		return item.title.slice(0, 50) + '...';
	}
	return item.title;
}
</script>

<Autocomplete {getOptions} {getDisplay} {style} placeholder="Search books" bind:value></Autocomplete>

Props

value:

any

getOptions:

function

getDisplay:

function

getOption:

function

component:

svelte component

placeholder:

autofocus:

pageSize:

delay:

clearable:

style:

Object

Slots

empty:

Events

This component doesn't emit any events

Styling

This component doesn't have any custom variables

//style.js
export default style = {};