read-query-param.html

---
title: "Read Query Parameter Demo"
layout: example.njk
---

<div
  x-data="{
    query: new URLSearchParams(location.search).get('q')
  }"
  class="flex flex-col"
>
  <p class="mb-2">location.search: "<span x-text="location.search"></span>"</p>
  <p class="mb-2">Param "q" (from URL): "<span x-text="query"></span>"</p>
  <p class="mb-2">
    Some sample links with "q" in the URL:
    <a
      class="text-blue-500 hover:text-blue-800 hover:underline"
      href="?q=my search"
      >my search</a
    >,
    <a
      class="text-blue-500 hover:text-blue-800 hover:underline"
      href="?q=another search"
      >another search</a
    >,
    <a class="text-blue-500 hover:text-blue-800 hover:underline" href="?q="
      >reset</a
    >
  </p>
</div>