A Django autocomplete component powered by htmx
Project description
django-htmx-autocomplete
This Django app provides a client-side autocomplete component powered by htmx featuring multiselect, search and is completely extensible.
Quick start
-
Add "autocomplete" to your
INSTALLED_APPSsetting like this:# settings.py INSTALLED_APPS = [ ... 'django.contrib.staticfiles', # also required 'autocomplete', ]
-
Include the autocomplete urls like this:
# urls.py ... from autocomplete import HTMXAutoComplete urlpatterns = [ ... *HTMXAutoComplete.url_dispatcher('ac'), ]
This will add routes prefixed by
acto support component instances. -
Use either the widget or class to create components!
from django forms from django.db import models from autocomplete import HTMXAutoComplete, widgets # Example models class Person(models.Model): name = models.CharField(max_length=60) class Team(models.Model): name = models.CharField(max_length=60) members = models.ManyToManyField(Person) # Using the widget class MultipleFormModel(forms.ModelForm): """Multiple select example form using a model""" class Meta: """Meta class that configures the form""" model = Team fields = ['name', 'members'] widgets = { 'members': widgets.Autocomplete( name='members', options=dict(multiselect=True, model=Person) ) } # Using the class class GetItemsMultiAutoComplete(HTMXAutoComplete): name = "members" multiselect = True class Meta: model = Person
-
Make sure your templates include HTMX.
Note Bootstrap is included in this example styling, however it is not required.
{% load autocomplete %} {% load static %} <!doctype html> <html lang="en"> <head> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> </head> <body> <h1>Example base html template</h1> <!-- Bootstrap --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> <!-- htmx --> <script src="https://unpkg.com/htmx.org@1.8.3" integrity="sha384-e2no7T1BxIs3ngCTptBu4TjvRWF4bBjFW0pt7TpxOEkRJuvrjRt29znnYuoLTz9S" crossorigin="anonymous"></script> <!-- htmx csrf --> <script> document.body.addEventListener('htmx:configRequest', (event) => { event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}'; }); </script> </body> </html>
Customization
Strings
The strings listed in the table below can be overriden by creating the appropriate
template in your own project, matching the autocomplete/strings/{name}.html pattern.
By default all strings are available in both French and English.
| Name | Description | Default English | Default French |
|---|---|---|---|
| no_results | Text displayed when no results are found. | No results found. | Aucun résultat trouvé. |
| more_results | When max_results is set, text displayed when there are additional results available. |
Displaying maximum {{ count }} out of {{ total_results }} results. | Affichage maximum de {{ count }} résultats sur {{ total_results }}. |
| available_results | Text anounced to sceen readers when results are available. If max_results is set, the more_results text is spoken instead. | {{ count }} results available. | {{ count }} résultats disponibles. |
| nothing_selected | Text anounced to screen readers when there are no selections. | Nothing selected. | Rien de sélectionné. |
Individual instances can override strings by providing a dictionary of custom_strings.
class GetItemsMultiAutoComplete(HTMXAutoComplete):
name = "members"
multiselect = True
custom_strings = {
"no_results": "no results text",
"more_results": _("More results text")
}
class Meta:
model = Person
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-htmx-autocomplete-0.8.3.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | de7fc5101d0f2f9d5f939a329a523203da76808d180a1e813e038e26b0ad6c4d |
|
| MD5 | 2463054d1579f5787c51baac8d7f651a |
|
| BLAKE2b-256 | 2cb08a88c124f72b552b463cd23afa381ae59b5b594982cb6cc2ca489a4736d8 |
Hashes for django_htmx_autocomplete-0.8.3-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 94e05cf49376468100a15c678a86e176a27f6046d8a549f28951f84722d2c097 |
|
| MD5 | ddc6a1ff5dfac55e3d593347fc79e846 |
|
| BLAKE2b-256 | 86ab5602d87857bd79f322a9cc85727d70dac32da9a1d65a81b692e86e127c78 |
