feat:added SearchSuggestions

src/lib/components/Tabs/Tab/SearchTab.svelte

@@ -1,18 +1,58 @@
 <script lang="ts">
-	import { Input, Button, TabItem } from 'flowbite-svelte';
+	import { Input, Button, ButtonGroup, TabItem, Dropdown, DropdownItem } from 'flowbite-svelte';
 	import { SearchOutline } from 'flowbite-svelte-icons';
 	export let url: string;
+	let suggestions: string[] = [];
 	import { createEventDispatcher } from 'svelte';
 	let dispatch = createEventDispatcher();
 	function Search() {
 		dispatch('Query', url);
 	}
+
+	async function searchSuggestions() {
+		const query = url;
+		if (!query) return;
+
+		const response = await fetch(`/api/ytdl/search/suggestions?q=${query}`, {
+			method: 'GET',
+			headers: {
+				'content-type': 'application/json'
+			}
+		});
+
+		if (response.status !== 200) {
+			return console.error(response.status, response);
+		}
+
+		suggestions = await response.json();
+	}
 </script>
 
 <TabItem>
 	<div slot="title" class="flex items-center gap-2"><SearchOutline size="xs" />from Search</div>
 	<div class="flex flex-col items-center">
-		<Input type="text" class="my-2" bind:value={url} placeholder="Relax Music" required />
+		<ButtonGroup class="w-full">
+			<Input
+				type="text"
+				class="my-2"
+				bind:value={url}
+				on:input={() => searchSuggestions()}
+				placeholder="Relax Music"
+				list="suggestions"
+				required
+			/>
+			<Dropdown>
+				{#if suggestions.length}
+					{#each suggestions as entry}
+						<DropdownItem
+							on:click={(e) => {
+								url = e.originalTarget.innerText;
+							}}>{entry}</DropdownItem
+						>
+					{/each}
+				{/if}
+			</Dropdown>
+		</ButtonGroup>
 		<Button on:click={Search} class="gap-1"><SearchOutline size="sm" />Search</Button>
 	</div>
 </TabItem>

src/routes/api/ytdl/search/suggestions/+server.ts

@@ -0,0 +1,40 @@
+import { json } from '@sveltejs/kit';
+import { Innertube } from 'youtubei.js';
+
+const yt = await Innertube.create();
+
+export const GET = async ({ url }: { url: URL }) => {
+	const query = new URL(url).searchParams.get('q');
+
+	if (!query) throw new Error('No query');
+
+	try {
+		const searchResults = await yt.getSearchSuggestions(query);
+
+		if (!searchResults)
+			return json(
+				{
+					error: 'results not found'
+				},
+				{
+					status: 404
+				}
+			);
+
+		return new Response(JSON.stringify(searchResults), {
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+	} catch (error) {
+		console.error(error);
+		return json(
+			{
+				error: 'Internal Server Error'
+			},
+			{
+				status: 500
+			}
+		);
+	}
+};