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"

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"

• javascript
• html
• htmx

3 Answers 3

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

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.

Another work-around is to just make a few empty elements reacting to events from the same element using hx-trigger attribute with the from modifier – instructing them to fire different requests on events from the input element with id user_search_bar, eg.:

<input type="text" id="user_search_bar">
<div hx-trigger="click from:#user_search_bar" hx-get="/endpoint1" hx-target="#users-list"></div>
<div hx-trigger="keyup from:#user_search_bar delay:500ms" hx-post="/endpoint2" hx-target="#vendors-list"></div>

<div id="users_list">the GET on click will change this</div>
<div id="vendors_list">the POST on keyup will change this</div>

This way you can also fire multiple requests on the same event (if eg. you want a single button launch multiple requests, eg. one DELETE and another POST, or the like). Though in this case, if you control the backend, it’s probably better to use Out of Band swaps and a single endpoint, as in Riki137’s answer.