search_history_with_alpine_js_and_persist_plugin.html

<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

<div x-data="{ searchHistory: $persist([]).as('searchHistory') }" class="mx-auto max-w-sm bg-white py-8 px-6">
    <form
        @submit="
            searchHistory.unshift($refs.searchInput.value)
            searchHistory = searchHistory.slice(0,5)
        "
        action="/" method="GET">
        <input x-ref="searchInput"
            class="block w-full rounded-md border border-gray-300 bg-white py-3 pl-8 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500"
            name="search" type="text" placeholder="Search something" autofocus autocomplete="off" />
    </form>

    <button @click="searchHistory = []" class="font-semibold">
        Clear
    </button>

    <ul>
        <template x-for="search in searchHistory">
            <li x-text="search"></li>
        </template>
    </ul>
</div>