Oh See Gists Demo

5ec8a89a17ba2.html

<div class="relative w-64" x-data="initSearch()">
  <input
    type="search"
    x-model="query"
    x-on:keyup="search()"
    class="bg-white border border-gray-300 p-1 rounded w-full"
    placeholder="Search..."
  />
  <div x-show="query" class="absolute bg-white shadow rounded w-full max-w-full" style="display: none;">
    <p x-show="loading" class="py-2 m-0">Loading</p>
    <p x-show="!loading && !resultsHtml" class="py-2 m-0">No results.</p>
    <div x-show="!loading && resultsHtml" x-html="resultsHtml"></div>
  </div>
</div>

5ec8a89a17ba4.js

import Alpine from 'alpinejs';
import debounce from './debounce';

5ec8a89a17ba5.php

<?php

Route::statamic('/', 'home', [
    'title' => 'Home'
]);