Add test data for LocationSearchBox

src/lib/components/ui/LocationSearchBox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Textbox from '$lib/components/Textbox.svelte';
+    import Textbox from '$lib/components/ui/Textbox.svelte';
     import { onMount } from 'svelte';
 
     interface LocationRecord {
@@ -34,7 +34,7 @@
     }
 
     function search(query: string) {
-        if (query.length < 2) {
+        if (query.length < 3) {
             results = [];
             return;
         }
@@ -55,7 +55,7 @@
         showResults = false;
         selectedIndex = -1;
 
-        // emit event later if needed
+        console.log("Selected Location: ", JSON.stringify(loc))
     }
 
     function handleKey(e: KeyboardEvent) {
@@ -80,9 +80,10 @@
 <div class="location-search">
     <Textbox
         bind:value
-        placeholder="Search for a station or TIPLOC"
+        placeholder="Enter Location"
         oninput={() => showResults = true}
         onkeydown={handleKey}
+        capital
     />
 
     {#if showResults && results.length}
@@ -101,4 +102,11 @@
             {/each}
         </ul>
     {/if}
-</div>
+</div>
+
+<style>
+    .suggestions {
+        background-color: var(--color-title);
+        color: var(--color-bg-dark);
+    }
+</style>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/components/ui/Button.svelte';
+	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
 	import Textbox from '$lib/components/ui/Textbox.svelte';
 	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
 
@@ -16,4 +17,6 @@
 
 <BaseCard header={"Hello"} helpText={"This is help text"}>Hello</BaseCard>
 
+<LocationSearchBox />
+
 <h2>OwlBoard</h2>