chadtmiller.com/knotless

<script lang="ts" module>
	/** Whether the search was being typed into as the page changed. */
	let typing = false;
</script>

<script lang="ts">
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';
	/** A search for repositories, which looks as it is typed; without script, on enter. */
	let { query = '' }: { query?: string } = $props();
	// What was typed, kept as typed: the answer's query is trimmed.
	// svelte-ignore state_referenced_locally
	let value = $state(query);
	let input: HTMLInputElement;
	let timer: ReturnType<typeof setTimeout>;

	function look() {
		clearTimeout(timer);
		timer = setTimeout(() => {
			typing = true;
			goto(`/?q=${encodeURIComponent(value)}`, { replace: true, reset: false });
		}, 150);
	}

	// Typing on the front page moves to the results, where the typing goes on.
	onMount(() => {
		if (!typing) return;
		typing = false;
		input.focus();
		input.setSelectionRange(value.length, value.length);
	});
</script>

<form action="/" role="search" class="find"><input bind:this={input} type="search" name="q" bind:value oninput={look} placeholder="find a repository" aria-label="Find a repository" /></form>