Auto complete

<AutoComplete
	label="Fruits"
	variant="outlined"
	name="fruit"
	options={[{ label: 'Apple' }, { label: 'Banana' }]}
/>

<AutoComplete
	options={fruitOptions}
	variant="outlined"
	placeholder="Add fruit..."
	style="width:340px"
	label="Fruits"
	name="fruit"
	populated={fruits.length > 0}
	bind:value={fruitValue}
	onoptionselect={(option) => {
		fruits.push(option)
	}}
	optionsFilter={(option) => {
		return (
			(!fruitValue ||
				option.label.toLocaleLowerCase().includes(fruitValue.toLocaleLowerCase())) &&
			!fruits.find((f) => f.value === option.value)
		)
	}}
>
	<ChipSet chipsCount={fruits.length}>
		{#each fruits as fruit, index (fruit.value)}
			<InputChip
				name="fruit"
				value={fruit.value}
				label={fruit.label}
				ariaLabelRemove="Remove {fruit.label}"
				onremove={() => {
					if (index > -1) {
						fruits.splice(index, 1)
					}
				}}
			/>
		{/each}
	</ChipSet>
</AutoComplete>