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
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django-htmx-autocomplete-0.6.2.tar.gz.
File metadata
- Download URL: django-htmx-autocomplete-0.6.2.tar.gz
- Upload date:
- Size: 27.3 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.9.16
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
3e327ff6dfb1c810aca239e2692159736a3b8ca7ddd7ede95c4936e9274874be
|
|
| MD5 |
9e8476cf5150e424dd87f29e40b77f7a
|
|
| BLAKE2b-256 |
5f1a2d07d4d88aa4ddc23886e7e16984030874460487cee97a5171c3db45deab
|
File details
Details for the file django_htmx_autocomplete-0.6.2-py3-none-any.whl.
File metadata
- Download URL: django_htmx_autocomplete-0.6.2-py3-none-any.whl
- Upload date:
- Size: 34.0 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.9.16
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
1667874c70b209ca6cc268dc1d419aca1e51d820cdcb83d6dfc5c2a7f4f9631e
|
|
| MD5 |
a59ee0340f73605cc78795c89e8e8da5
|
|
| BLAKE2b-256 |
81968b6403dc0d6f3abe0de9eb5d7da7cf2a6b3ac8b5c91dd4d60d911bebed73
|
