Search modal - help needed

Kirby 3 Questions 🤔
1

hey everyone, i’m building my first search and i’m in need for some help!

from the UI point of view i have a very similar situation of the getkirby.com website: on top of the page, at the end of the menu i have a search button, when you click on it a modal opens up and you can type and start your search.

the search is working, but i can’t figure out how to prevent the modal to close once i hit enter, or even just click on the submit button.

i guess i need to prevent the page to refresh - but can’t understand how…
i’m handling all interactivity with alpine.js.

lastly, i’m also wondering how do i remove the search query from the url once i close the modal?

many thanks for any help or direction!
A

my code

search snippet

i have the x-data ‘search’ in the body tag

<div
  x-show = search
  @click.outside="search = false"
  class="fixed z-30 bg-white bg-opacity-90 p-4 inset-1/3 w-[600px] h-[300px]">
  <!-- search input -->
  <form
    x-trap="search"
    class="flex w-full space-x-2">
    <input
      autocomplete="off"
      placeholder="Search"
      type="search"
      name="q"
      value="<?= html($query) ?>"
      class="focus:outline-none p-1 grow"
    >
    <button
      type="submit"
      role="button"
      class="p-1 px-2 ring-none bg-gray-200 hover:bg-red-200 flex-none">
      <img class="h-5" src="<?= url('assets/icons/search.svg')  ?>" alt="Search Icon">
    </button>
  </form>
  <!-- search results -->
  <ul class="flex flex-col space-y-4 w-full">
    <?php foreach ($results as $result): ?>
      <a href="<?= $result->url() ?>" class="bg-green-400 w-full">
        <li class="hover:bg-red-100 w-full">
          <?= $result->title() ?>
        </li>
      </a>
    <?php endforeach ?>
  </ul>
</div>

<!-- background -->
<div
  x-cloak
  x-show = search
  class="fixed top-0 left-0 w-full h-full z-20 bg-black bg-opacity-25">
</div>

search in the menu snippet

(where i also load the search snippet)

<p
  @click="search = true"
  class="col-end-13 text-right capitalize cursor-pointer">
  Search
</p>

search controller

<?php

return function ($site) {

  $query   = get('q');
  $results = $site->index()->listed()->search($query, 'title', ['words' => false]);
  $results = $results->paginate(20);

  return [
    'query'   => $query,
    'results' => $results,
    'pagination' => $results->pagination()
  ];

};