Search input transitions on items, styling items on search and hover, exporting search from component.

src/lib/SearchFilter.svelte

@@ -1,18 +1,61 @@
 <script>
+	import { fade } from 'svelte/transition';
 	export let items;
-	let search = '';
+	export let search = '';
+	let isFocused = false;
 
 	$: filteredSearch = items.filter((item) => {
 		return search === '' || item.toLowerCase().indexOf(search.toLowerCase()) !== -1;
 	});
 </script>
 
-<label>
+<div class="wrapper">
-	Search Names: <br />
+	<label>
-	<input bind:value={search} type="text" placeholder="Search" />
+		Search Names: <br />
-</label>
+		<input
-<ul>
+			on:focus={() => (isFocused = true)}
-	{#each filteredSearch as item}
+			bind:value={search}
-		<li>{item}</li>
+			type="text"
-	{/each}
+			placeholder="Search"
-</ul>
+		/>
+	</label>
+
+	{#if isFocused}
+		<ul transition:fade={{ duration: 200 }}>
+			{#each filteredSearch as item}
+				<li
+					transition:fade={{ duration: 200 }}
+					on:click={() => {
+						search = item;
+						isFocused = false;
+					}}
+				>
+					{item}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.wrapper {
+		position: relative;
+		display: inline-block;
+	}
+	ul {
+		position: absolute;
+		width: 100%;
+		border: 1px solid black;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	li {
+		padding: 10px;
+		cursor: pointer;
+		transition: 0.3s background ease;
+	}
+	li:hover {
+		background: var(--listItemBackground, #eee);
+	}
+</style>

src/routes/index.svelte

@@ -3,13 +3,13 @@
 	// import BetterAccordion from '$lib/BetterAccordion.svelte';
 	// import Toggle from '$lib/Toggle.svelte';
 	let isToggled = false;
-
+	let search = '';
 	let items = ['scott', 'wes', 'landon', 'courtney', 'lucie', 'brooklyn', 'Samson'];
 </script>
 
-<h1>Welcome to Level Up UI</h1>
+<h1>Welcome to Level Up UI {search}</h1>
 
-<SearchFilter {items} />
+<SearchFilter {items} bind:search />
 
 <!-- <BetterAccordion isOpen={false} buttonText="Do I need a credit card??">
 	<div>