Svelte Complete

The basic way to use this library, simply pass an array of strings.

<script>
  import Autocomplete from "svelte-complete";

  let items = ["apple", "banana", "orange"];
</script>

<Autocomplete {items} />

When using objects, you will have to pass the array of objects and also specify which field will be displayed with `displayField`.

<script>
  import Autocomplete from "svelte-complete";

	const items = [
		{ name: "Success", id: 0},
		{ name: "Warning", id: 1},
		{ name: "Error", id: 2},
    	{ name: "Nice", id: 69 },
  ];
</script>

<Autocomplete {items} displayField="name" />

Svelte-complete provides three different ways to sort your autocomplete items: ascend, descend, and a custom sorting function. Keep in mind that ascend and descend sorts only work for string arrays. For this example, we will implement the descend sort.

<script>
  import Autocomplete from "svelte-complete";

	const items = [
		{ name: "Success", id: 0},
		{ name: "Warning", id: 1},
		{ name: "Error", id: 2},
    	{ name: "Nice", id: 69 },
  ];

  const sort = (a: {id: number, name: string}, b: {id: number, name: string}) => b.name.localeCompare(a.name);
</script>

<Autocomplete {items} {sort} displayField="name" />