Multiple targets for Htmx

Question

I have multiple triggers on my htmx.

<input list="users_list" type="text" name="user_name" class="search-bar" placeholder="Username"
    id="user_search_bar"
    value=""
    hx-trigger="keyup delay:500ms, change"
    x-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-post="{% url 'search_user' %}"
    hx-target="#users_list"
    <datalist id="users_list">
          <option value="elem">elem</option>
    </datalist>

How can I declare one target for each trigger. For exemple when the trigger is "keyup delay" the target should be "users_list", if the trigger is "change" the target should be "endor_list"

Answer 1

The only way to do this just with HTMX is to take advantage of inheritance and use a couple of nested outer elements around the input.

Each outer element will have its own trigger and target attributes. You can also have different hx-post attributes on each one or leave it in the input. Here's the example code:

<div hx-target="#vendor_list" hx-trigger="change" hx-post="/vendor">

    <div hx-target="#users_list" hx-trigger="keyup delay:500ms" hx-post="/users">

        <input list="users_list" type="text" name="user_name" class="search-bar" placeholder="Username" id="user_search_bar" value="">

        <datalist id="users_list">
            <option value="elem">elem</option>
        </datalist>

    </div>

</div>

<div id="vendor_list">
    vendor list
</div>

This works because when the element that "catches" the event will use the target specified within the element itself. You can see it working here https://codepen.io/jreviews/pen/PodpMYd

Answer 2

If you want to replace content in a webpage on multiple places, you can use something called Out of Band swaps. Here's a basic example:

<div id="message" hx-swap-oob="true">Swap me directly!</div>
Additional Content

In this code, the text inside the <div> with the ID "message" will be swapped directly into the webpage. The "Additional Content" will be swapped in the usual way.

This method lets you update parts of a webpage along with other updates. Just remember, the elements you want to swap out must be at the top level of your response, not nested inside other elements.