🔎Active search

<div class="toolbar">
  <div class="search">
    <input class="input" type="search" name="q" value="{$q}" placeholder="Search - try lamp, audio or usb" autocomplete="off"
           aria-label="Search the products" hx-get="?examples/search" hx-trigger="input changed delay:250ms, search"
           hx-target="#results" hx-push-url="true" hx-indicator="#searching">
  </div>
  <span id="searching" class="htmx-indicator spinner" aria-hidden="true"></span>
</div>

<div id="results">
{fragment 'results'}
  <p class="muted small">{$count} {if $count eq 1}product{else}products{/if}{if $q} for <mark>{$q}</mark>{/if}</p>
  <table class="table">
    <thead><tr><th>Product</th><th>Category</th><th class="num">Price</th></tr></thead>
    <tbody>
      {found}
      <tr><td>{$emoji} {$name}</td><td><span class="badge">{$category}</span></td><td class="num">{$price | currency('EUR')}</td></tr>
      {/found}
    </tbody>
  </table>
  {if $count eq 0}<div class="empty-state"><span class="big">🔎</span>Nothing in the catalogue matches.</div>{/if}
{/fragment}
</div>

<?php

  // The products whose name, category or text holds the query. The same PHP serves the page
  // and every answer to htmx: the input's hx-target="#results" sends HX-Target: results,
  // and PAD answers the {fragment 'results'} of search.pad alone. The query stands in the
  // address (hx-push-url), so a reload - or a link - shows the same results whole.

  $q = trim ( htmxText ( 'q' ) );

  $found = array_values ( array_filter ( htmxData ( 'products' ), fn ( $product ) =>
             $q === '' or stripos ( $product ['name'] . ' ' . $product ['category'] . ' ' . $product ['blurb'], $q ) !== FALSE ) );

  $count = count ( $found );

?>