Is there a way to use arrowkeys(up & down) to focus my search result?

Question

I am trying to get the same functionality as the search modal in kit.sveltekit.dev when you press cmd + k

Here I use my up and down keys to quickly go through them

What I have now is an input that shows searchresult when I type and I can't figure out a way to use my arrow key to cycle through them

<script>
  export let apps;
  let searchTerm;

  let filteredApps = [];
  $: filteredApps = apps.filter((app) => {
    let appName = app.app_name.toLowerCase();
    return appName.includes(searchTerm);
  });
</script>

<div class="wrapper">
  <input type="text" bind:value={searchTerm} />
  <div>
    <ul>
      {#each filteredApps as app}
        <li>
          <a href={app.app_name}>{app.app_name} </a>
        </li>
      {/each}
    </ul>
  </div>
</div>

Answer 1

If you want to get the same functionality I'd suggest looking at how they implemented it. You can find code for their search here. Specifically this part for their modal, starting around line 135. Their code is pretty easy to read.

They attach on:keydown event listener on their modal element. The function it triggers checks to see if event.key equals ArrowDown or ArrowUp and cycles accordingly.