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!
# 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>
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
File details
Details for the file django-htmx-autocomplete-0.4.1.tar.gz.
File metadata
- Download URL: django-htmx-autocomplete-0.4.1.tar.gz
- Upload date:
- Size: 20.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.11.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
9e02e75e322cc1dc452b2f20d7df2dabddb83d9da2ca8025ed8388eb6cea4ffc
|
|
| MD5 |
932441714e50f447b9692996ed7ed3f1
|
|
| BLAKE2b-256 |
a6d1aeaa3cd24031a5df7007eb9228dd9d418e9d7f7a05a77a7f43bf933d671c
|
