<div class="relative" _="on click from elsewhere set the innerHTML of #exercise-results to ''">
    <input
        class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
        id="exercise-search" type="search" name="query" placeholder="Search exercises..."
        hx-get="{{ url_for('get_exercises', person_id=person_id) }}" hx-target="#exercise-results"
        hx-trigger="keyup changed delay:500ms" hx-swap="innerHTML" autocomplete="off" {% if exercise_name %}
        value="{{ exercise_name }}" {% endif %} _="
            on input
                if this.value is empty
                    set the innerHTML of #exercise-results to ''
        ">

    <!-- Dropdown Menu -->
    <div id="exercise-results" class="absolute w-full bg-white  mt-1 rounded shadow-md z-10">
        <!-- Results will be injected here -->
    </div>

    <input type="hidden" name="exercise_id" id="selected-exercise" {% if exercise_id %} value="{{ exercise_id }}" {%
        endif %}>

</div>