https://htmx.org logo
Hi folks. I'm trying to implement the active searc...
# 🔥-django-htmx
r
Hi folks. I'm trying to implement the [active search pattern](https://htmx.org/examples/active-search/) example from HTMX in my Django project, and need some help. The HTML code looks like this:
Copy code
django
<input
  id="search-field"
  type="search"
  name="search" {# this creates the 'search' GET query paramater #}
  hx-get="{% querystring %}" {# current URL with existing query parameters - search param will be added automatically #} 
  hx-trigger="keyup changed delay:500ms, search"
  hx-target="#table-container"
  hx-swap="outerHTML"
  hx-push-url="true"
>
The
querystring
template tag you see comes from django-tables (https://github.com/jieter/django-tables2/blob/master/django_tables2/templatetags/django_tables2.py) and as explained in the source code, it allows to build a relative url, keeping already existing query parameters. This is exactly what I need when running a search, as I want to keep other query parameters (like sorting). I'll describe my issue with an example:
 If I go directly to "http://localhost:8000/objects?sort=title", I can see that the value of hx-get is
hx-get="?sort=title"
, as expected. Which means if I run a search, the final search url suffix will be something like
?sort=title&search=foo
(as expected). 

 However, if I go to http://localhost:8000/objects and then use a button on my UI to trigger an HTMX query that updates the URL to "http://localhost:8000/objects?sort=title", the value of hx-get is still empty (
hx-get="?"
).
 Then, of course if I run a search, the final search url suffix misses the sorting. 

 All of this is obvious because the
<input>
part is NEVER updated by htmx. Hence the
{% querystring %}
tag has is evaluated once when loading the
http://localhost:8000/objects
page, and can't change after that. While I understand where my problem comes from, I'm not sure how to deal with this properly. Maybe include the
<input>
into the HTMX response (but feel unnatural)? Thanks for your help.