fix: trigger species search on button click, not on input change

Avoids burning Perenual API quota on every keystroke.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Stephan Kerkman 2026-05-28 10:23:45 +02:00
parent 4b1212c5ec
commit 34f6c3652e

View file

@ -4,17 +4,23 @@
<h5 class="mb-3">Add a plant</h5> <h5 class="mb-3">Add a plant</h5>
<p class="text-muted small">Search for the species to auto-fill care info, or skip to enter details manually.</p> <p class="text-muted small">Search for the species to auto-fill care info, or skip to enter details manually.</p>
<input <div class="input-group mb-2">
type="search" <input
class="form-control mb-2" type="search"
placeholder="🔍 Search species, e.g. 'climbing rose'" class="form-control"
hx-get="{% url 'species_search' %}" placeholder="e.g. 'climbing rose'"
hx-trigger="input changed delay:400ms" name="q"
hx-target="#species-results" id="species-q"
hx-swap="innerHTML" autocomplete="off"
name="q" >
autocomplete="off" <button
> class="btn btn-success"
hx-get="{% url 'species_search' %}"
hx-include="#species-q"
hx-target="#species-results"
hx-swap="innerHTML"
>Search</button>
</div>
<div id="species-results" class="list-group mb-3"></div> <div id="species-results" class="list-group mb-3"></div>