form with htmx

[gerald]

Has anybody a simple example, how htmx works in the frontend, please, e.g. with form:

<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup changed delay:500ms"
    hx-target="#search-results"
    placeholder="Search..."
>
<div id="search-results"></div>

Thanks!!

[Jan Romero]

HTMX will see the hx- attributes on your element and send a GET request to yourdomain.at/trigger_delay with the value of the input named “q” whenever it is triggered. Whatever the server sends as a response, HTMX will put in the div at the bottom (HTMX calls this “swapping“).

Or something like that. I’m not familiar enough with HTMX’s defaults and the trigger syntax to be sure that your code will definitely work. Looks good though. The important parts happen in /trigger_delay, obviously. That is in keeping with HTMX’s whole raison d’être of mostly sticking to doing things on the server.

What’s sticking out to me is the url of your endpoint “/trigger_delay”. It looks like this is supposed to be a page that returns search results or type-ahead suggestions, so I would expect something like “/search”.

[gerald]

Thanks Jan, for your quick reply. I had a small configuration error in the backend, which is why htmx did not work immediately. I use htmx for the first time, so I looked for the error in the wrong place 😔 Thank you for the quick response time. It's always inspiring to see how helpful everyone is here!