# TomSelect for Django (MIZDB)
Django autocomplete widgets and views using [TomSelect](https://tom-select.js.org/).
Note that this was written specifically with the [MIZDB](https://github.com/Actionb/MIZDB) app in mind - it may not
apply to your app.
<!-- TOC -->
* [TomSelect for Django (MIZDB)](#tomselect-for-django-mizdb)
* [Installation](#installation)
* [Usage](#usage)
* [Widgets](#widgets)
* [MIZSelect](#mizselect)
* [MIZSelectTabular](#mizselecttabular)
* [Adding more columns](#adding-more-columns)
* [MIZSelectMultiple & MIZSelectTabularMultiple](#mizselectmultiple--mizselecttabularmultiple)
* [Function & Features](#function--features)
* [Searching](#searching)
* [Option creation](#option-creation)
* [AJAX request](#ajax-request)
* [Changelist link](#changelist-link)
* [Inline edit link](#inline-edit-link)
* [Filter against values of another field](#filter-against-values-of-another-field)
* [Add & Edit popup response](#add--edit-popup-response)
* [Overwrite settings](#overwrite-settings)
* [Development & Demo](#development--demo)
<!-- TOC -->
----
## Installation
Install:
```bash
pip install -U mizdb-tomselect
```
## Usage
Add to installed apps:
```python
INSTALLED_APPS = [
...
"mizdb_tomselect"
]
```
Configure an endpoint for autocomplete requests:
```python
# urls.py
from django.urls import path
from mizdb_tomselect.views import AutocompleteView
urlpatterns = [
...
path('autocomplete/', AutocompleteView.as_view(), name='my_autocomplete_view')
]
```
Use the widgets in a form.
```python
from django import forms
from mizdb_tomselect.widgets import MIZSelect, MIZSelectTabular
from .models import City, Person
class MyForm(forms.Form):
city = forms.ModelChoiceField(
City.objects.all(),
widget=MIZSelect(City, url='my_autocomplete_view'),
)
# Display results in a table, with additional columns for fields
# 'first_name' and 'last_name':
person = forms.ModelChoiceField(
Person.objects.all(),
widget=MIZSelectTabular(
Person,
url='my_autocomplete_view',
search_lookup="full_name__icontains",
# for extra columns pass a mapping of model field: column header label
extra_columns={'first_name': "First Name", "last_name": "Last Name"},
# The column header label for the labelField column
label_field_label='Full Name',
),
)
```
NOTE: Make sure to include [bootstrap](https://getbootstrap.com/docs/5.2/getting-started/download/) somewhere. For
example in the template:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MIZDB TomSelect Demo</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
{{ form.media }}
</head>
<body>
<div class="container">
<form>
{% csrf_token %}
{{ form.as_div }}
<button type="submit" class="btn btn-success">Save</button>
</form>
</div>
</body>
</html>
```
----
## Widgets
The widgets pass attributes necessary to make autocomplete requests to the
HTML element via the dataset property. The TomSelect element is then initialized
from the attributes in the dataset property.
### MIZSelect
Base autocomplete widget. The arguments of MIZSelect are:
| Argument | Default value | Description |
|----------------|----------------------------------------|------------------------------------------------------------------------------------------------|
| model | **required** | the model class that provides the choices |
| url | `"autocomplete"` | view name of the autocomplete view |
| value_field | `f"{model._meta.pk.name}"` | model field that provides the value of an option |
| label_field | `getattr(model, "name_field", "name")` | model field that provides the label of an option |
| search_lookup | `f"{label_field}__icontains"` | the lookup to use when filtering the results |
| create_field | | model field to create new objects with ([see below](#ajax-request)) |
| changelist_url | | view name of the changelist view for this model ([see below](#changelist-link)) |
| add_url | | view name of the add view for this model([see below](#option-creation)) |
| edit_url | | view name of the edit view for this model([see below](#inline-edit-link)) |
| filter_by | | a 2-tuple defining an additional filter ([see below](#filter-against-values-of-another-field)) |
| can_remove | True | whether to display a remove button next to each item |
### MIZSelectTabular
This widget displays the results in tabular form. A table header will be added
to the dropdown. By default, the table contains two columns: one column for the choice
value (commonly the "ID" of the option) and one column for the choice label (the
human-readable part of the choice).
MIZSelectTabular has the following additional arguments:
| Argument | Default value | Description |
|-------------------|---------------------------------|-----------------------------------|
| extra_columns | | a mapping for additional columns |
| value_field_label | `f"{value_field.title()}"` | table header for the value column |
| label_field_label | `f"{model._meta.verbose_name}"` | table header for the label column |
#### Adding more columns
To add more columns, pass a `result attribute name: column label` mapping to the widget
argument `extra_columns`. For example:
```python
# models.py
class Person(models.Model):
name = models.CharField(max_length=100, blank=True)
dob = models.DateField(blank=True, null=True)
city = models.ForeignKey("City", on_delete=models.SET_NULL, blank=True, null=True)
# forms.py
class TabularForm(forms.Form):
person = forms.ModelChoiceField(
Person.objects.all(),
widget=MIZSelectTabular(
Person,
extra_columns={"dob": "Date of Birth", "city__name": "City"},
label_field_label="Name",
),
required=False,
)
```
The column label is the table header label for a given column (here: `Date of Birth` and `City`).
The attribute name tells TomSelect what value to look up on a result for the column (here: model field `dob` and lookup
expression `city__name` on the relation field `city`).
**Important**: that means that the result visible to TomSelect must have an attribute
or property with that name or the column will remain empty.
The results for TomSelect are created by the view calling `values()` on the
result queryset, so you must make sure that the attribute name is available
on the view's root queryset as either a model field or as an annotation.
### MIZSelectMultiple & MIZSelectTabularMultiple
Variants of the above widgets that allow selecting multiple options.
----
## Function & Features
### Searching
The AutocompleteView filters the result queryset against the `search_lookup`
passed to the widget. The default value for the lookup is `name__icontains`.
Overwrite the `AutocompleteView.search` method to modify the search process.
```python
class MyAutocompleteView(AutocompleteView):
def search(self, request, queryset, q):
# Filter using your own queryset method:
return queryset.search(q)
```
### Option creation
To enable option creation in the dropdown, pass the view name of the
add view for the given model to the widget. This will add an 'Add' button to the
bottom of the dropdown.
```python
# urls.py
urlpatterns = [
...
path('autocomplete/', AutocompleteView.as_view(), name='my_autocomplete_view'),
path('city/add/', CityCreateView.as_view(), name='city_add'),
]
# forms.py
widget = MIZSelect(City, url='my_autocomplete_view', add_url='city_add')
```
Clicking on that button sends the user to the add page of the model.
> NOTE: Also see [Add & Edit popup response](#add--edit-popup-response)
#### AJAX request
If `create_field` was also passed to the widget, clicking on the button will
create a new object using an AJAX POST request to the autocomplete URL. The
autocomplete view will use the search term that the user put in on the
`create_field` to create the object:
```python
class AutocompleteView:
def create_object(self, data):
"""Create a new object with the given data."""
return self.model.objects.create(**{self.create_field: data[self.create_field]})
```
Override the view's `create_object` method to change the creation process.
### Changelist link
The dropdown will include a link to the changelist of the given model if you
pass in the view name for the changelist view.
```python
# urls.py
urlpatterns = [
...
path('autocomplete/', AutocompleteView.as_view(), name='my_autocomplete_view'),
path('city/change/', CityChangelistView.as_view(), name='city_changelist'),
]
# forms.py
widget = MIZSelect(City, url='my_autocomplete_view', changelist_url='city_changelist')
```
### Inline edit link
Provide a `edit_url` to attach a link to the edit/change page for each selected item.
```python
# urls.py
urlpatterns = [
...
path('person/edit/<path:object_id>/', PersonChangeView.as_view(), name='person_change'),
]
# forms.py
widget = MIZSelect(Person, edit_url='person_change')
```
> NOTE: Also see [Add & Edit popup response](#add--edit-popup-response)
### Filter against values of another field
Use the `filter_by` argument to restrict the available options to the value of
another field. The parameter must be a 2-tuple: `(name_of_the_other_form_field, django_field_lookup)`
```python
# models.py
class Person(models.Model):
name = models.CharField(max_length=50)
pob = models.ForeignKey("Place of Birth", on_delete=models.SET_NULL, blank=True, null=True)
class City(models.Model):
name = models.CharField(max_length=50)
# forms.py
class PersonCityForm(forms.Form):
city = forms.ModelChoiceField(queryset=City.objects.filter(is_capitol=True))
person = forms.ModelChoiceField(
queryset=Person.objects.all(),
widget=MIZSelect(
Person,
filter_by=("city", "pob_id")
)
)
```
This will result in the Person result queryset to be filtered against
`pob_id` with the current value of the `city` formfield.
NOTE: When using `filter_by`, the declaring element now **requires** that the other field
provides a value. If the other field does not have a value, the search will not
return any results.
### Add & Edit popup response
After adding new objects with the 'add' button or after editing selected objects with the
'edit' button, the options of the 'parent' form will still need to be updated.
This can be done by using the `PopupResponseMixin` view mixin with your CreateViews and UpdateViews.
```python
from mizdb_tomselect.views import PopupResponseMixin
class CityCreateView(PopupResponseMixin, CreateView):
...
class PersonChangeView(PopupResponseMixin, UpdateView):
...
```
You also need to modify the template for the Create-/UpdateView by adding a hidden field to the form:
```html
<form>
...
{% if is_popup %}
<input type="hidden" name="{{ is_popup_var }}" value="1">
{% endif %}
...
</form>
```
With all this in place, tabs opened from (left-)clicking an add or edit button will be
treated as a popup. When submitting a popup form, the view redirects to a popup response
template. That template loads some javascript that updates the form of the opener window
that created the popup. The popup window or tab is then closed.
This is, roughly, a slimmed down version of how django admin handles popups for related objects.
### Overwrite settings
To change MIZSelect or [TomSelect settings](https://tom-select.js.org/docs/), you can add a handler for the `initMIZSelect` event.
The event is dispatched before the TomSelect constructor is called.
The target of the event is the element that is about to be initialized.
You can pass your own settings to the init function `initMIZSelect` that is attached to the target element.
For example, to overwrite the title of the remove buttons:
```javascript
window.addEventListener('initMIZSelect', (e) => {
const elem = e.target
const mySettings = { plugins: { remove_button: { title: 'Remove This' } } }
elem.initMIZSelect(mySettings)
})
```
The settings will be merged with the default MIZSelect settings, and the TomSelect constructor
will be called with the merged settings.
----
## Development & Demo
```bash
python3 -m venv venv
source venv/bin/activate
make init
```
See the demo for a preview: run `make init-demo` and then start the demo server `python demo/manage.py runserver`.
Run tests with `make test` or `make tox`. To install required browsers for playwright: `playwright install`.
See the makefile for other commands.
Raw data
{
"_id": null,
"home_page": "",
"name": "mizdb-tomselect",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "",
"keywords": "",
"author": "",
"author_email": "Philip Becker <yummytea1@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/ab/9f/ed8330e6fda267b95e8e3d99bccfa24634bdc9426309059c5da0df0a6e14/mizdb-tomselect-0.10.0.tar.gz",
"platform": null,
"description": "# TomSelect for Django (MIZDB)\n\nDjango autocomplete widgets and views using [TomSelect](https://tom-select.js.org/).\n\n![Example of the MIZSelect widget](https://raw.githubusercontent.com/Actionb/mizdb-tomselect/main/demo/images/mizselect.png \"MIZSelect preview\")\n\nNote that this was written specifically with the [MIZDB](https://github.com/Actionb/MIZDB) app in mind - it may not\napply to your app.\n\n<!-- TOC -->\n* [TomSelect for Django (MIZDB)](#tomselect-for-django-mizdb)\n * [Installation](#installation)\n * [Usage](#usage)\n * [Widgets](#widgets)\n * [MIZSelect](#mizselect)\n * [MIZSelectTabular](#mizselecttabular)\n * [Adding more columns](#adding-more-columns)\n * [MIZSelectMultiple & MIZSelectTabularMultiple](#mizselectmultiple--mizselecttabularmultiple)\n * [Function & Features](#function--features)\n * [Searching](#searching)\n * [Option creation](#option-creation)\n * [AJAX request](#ajax-request)\n * [Changelist link](#changelist-link)\n * [Inline edit link](#inline-edit-link)\n * [Filter against values of another field](#filter-against-values-of-another-field)\n * [Add & Edit popup response](#add--edit-popup-response)\n * [Overwrite settings](#overwrite-settings)\n * [Development & Demo](#development--demo)\n<!-- TOC -->\n\n----\n\n## Installation\n\nInstall:\n\n```bash\npip install -U mizdb-tomselect\n```\n\n## Usage\n\nAdd to installed apps:\n\n```python\nINSTALLED_APPS = [\n ...\n \"mizdb_tomselect\"\n]\n```\n\nConfigure an endpoint for autocomplete requests:\n\n```python\n# urls.py\nfrom django.urls import path\n\nfrom mizdb_tomselect.views import AutocompleteView\n\nurlpatterns = [\n ...\n path('autocomplete/', AutocompleteView.as_view(), name='my_autocomplete_view')\n]\n```\n\nUse the widgets in a form.\n\n```python\nfrom django import forms\n\nfrom mizdb_tomselect.widgets import MIZSelect, MIZSelectTabular\nfrom .models import City, Person\n\n\nclass MyForm(forms.Form):\n city = forms.ModelChoiceField(\n City.objects.all(),\n widget=MIZSelect(City, url='my_autocomplete_view'),\n )\n\n # Display results in a table, with additional columns for fields \n # 'first_name' and 'last_name':\n person = forms.ModelChoiceField(\n Person.objects.all(),\n widget=MIZSelectTabular(\n Person,\n url='my_autocomplete_view',\n search_lookup=\"full_name__icontains\",\n # for extra columns pass a mapping of model field: column header label\n extra_columns={'first_name': \"First Name\", \"last_name\": \"Last Name\"},\n # The column header label for the labelField column\n label_field_label='Full Name',\n ),\n )\n``` \n\nNOTE: Make sure to include [bootstrap](https://getbootstrap.com/docs/5.2/getting-started/download/) somewhere. For\nexample in the template:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>MIZDB TomSelect Demo</title>\n <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js\"\n integrity=\"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4\"\n crossorigin=\"anonymous\"></script>\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n integrity=\"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65\" crossorigin=\"anonymous\">\n {{ form.media }}\n</head>\n<body>\n<div class=\"container\">\n <form>\n {% csrf_token %}\n {{ form.as_div }}\n <button type=\"submit\" class=\"btn btn-success\">Save</button>\n </form>\n</div>\n</body>\n</html>\n```\n\n----\n\n## Widgets\n\nThe widgets pass attributes necessary to make autocomplete requests to the\nHTML element via the dataset property. The TomSelect element is then initialized\nfrom the attributes in the dataset property.\n\n### MIZSelect\n\nBase autocomplete widget. The arguments of MIZSelect are:\n\n| Argument | Default value | Description |\n|----------------|----------------------------------------|------------------------------------------------------------------------------------------------|\n| model | **required** | the model class that provides the choices |\n| url | `\"autocomplete\"` | view name of the autocomplete view |\n| value_field | `f\"{model._meta.pk.name}\"` | model field that provides the value of an option |\n| label_field | `getattr(model, \"name_field\", \"name\")` | model field that provides the label of an option |\n| search_lookup | `f\"{label_field}__icontains\"` | the lookup to use when filtering the results |\n| create_field | | model field to create new objects with ([see below](#ajax-request)) |\n| changelist_url | | view name of the changelist view for this model ([see below](#changelist-link)) |\n| add_url | | view name of the add view for this model([see below](#option-creation)) |\n| edit_url | | view name of the edit view for this model([see below](#inline-edit-link)) |\n| filter_by | | a 2-tuple defining an additional filter ([see below](#filter-against-values-of-another-field)) |\n| can_remove | True | whether to display a remove button next to each item |\n\n### MIZSelectTabular\n\nThis widget displays the results in tabular form. A table header will be added\nto the dropdown. By default, the table contains two columns: one column for the choice\nvalue (commonly the \"ID\" of the option) and one column for the choice label (the\nhuman-readable part of the choice).\n\n![Tabular select preview](https://raw.githubusercontent.com/Actionb/mizdb-tomselect/main/demo/images/tabular_default.png \"Tabular select preview\")\n\nMIZSelectTabular has the following additional arguments:\n\n| Argument | Default value | Description |\n|-------------------|---------------------------------|-----------------------------------|\n| extra_columns | | a mapping for additional columns |\n| value_field_label | `f\"{value_field.title()}\"` | table header for the value column |\n| label_field_label | `f\"{model._meta.verbose_name}\"` | table header for the label column |\n\n#### Adding more columns\n\nTo add more columns, pass a `result attribute name: column label` mapping to the widget\nargument `extra_columns`. For example:\n\n```python\n# models.py\nclass Person(models.Model):\n name = models.CharField(max_length=100, blank=True)\n dob = models.DateField(blank=True, null=True)\n city = models.ForeignKey(\"City\", on_delete=models.SET_NULL, blank=True, null=True)\n\n\n# forms.py \nclass TabularForm(forms.Form):\n person = forms.ModelChoiceField(\n Person.objects.all(),\n widget=MIZSelectTabular(\n Person,\n extra_columns={\"dob\": \"Date of Birth\", \"city__name\": \"City\"},\n label_field_label=\"Name\",\n ),\n required=False,\n )\n```\n\n![Tabular select with more columns](https://raw.githubusercontent.com/Actionb/mizdb-tomselect/main/demo/images/tabular.png \"Tabular select with more columns\")\n\nThe column label is the table header label for a given column (here: `Date of Birth` and `City`).\n\nThe attribute name tells TomSelect what value to look up on a result for the column (here: model field `dob` and lookup\nexpression `city__name` on the relation field `city`).\n\n**Important**: that means that the result visible to TomSelect must have an attribute\nor property with that name or the column will remain empty.\nThe results for TomSelect are created by the view calling `values()` on the\nresult queryset, so you must make sure that the attribute name is available\non the view's root queryset as either a model field or as an annotation.\n\n### MIZSelectMultiple & MIZSelectTabularMultiple\n\nVariants of the above widgets that allow selecting multiple options.\n\n----\n\n## Function & Features\n\n### Searching\n\nThe AutocompleteView filters the result queryset against the `search_lookup`\npassed to the widget. The default value for the lookup is `name__icontains`.\nOverwrite the `AutocompleteView.search` method to modify the search process.\n\n```python\nclass MyAutocompleteView(AutocompleteView):\n\n def search(self, request, queryset, q):\n # Filter using your own queryset method:\n return queryset.search(q)\n```\n\n### Option creation\n\nTo enable option creation in the dropdown, pass the view name of the\nadd view for the given model to the widget. This will add an 'Add' button to the\nbottom of the dropdown.\n\n```python\n# urls.py\nurlpatterns = [\n ...\n path('autocomplete/', AutocompleteView.as_view(), name='my_autocomplete_view'),\n path('city/add/', CityCreateView.as_view(), name='city_add'),\n]\n\n# forms.py\nwidget = MIZSelect(City, url='my_autocomplete_view', add_url='city_add')\n```\n\nClicking on that button sends the user to the add page of the model.\n\n> NOTE: Also see [Add & Edit popup response](#add--edit-popup-response)\n\n#### AJAX request\n\nIf `create_field` was also passed to the widget, clicking on the button will\ncreate a new object using an AJAX POST request to the autocomplete URL. The\nautocomplete view will use the search term that the user put in on the\n`create_field` to create the object:\n\n```python\nclass AutocompleteView:\n\n def create_object(self, data):\n \"\"\"Create a new object with the given data.\"\"\"\n return self.model.objects.create(**{self.create_field: data[self.create_field]})\n```\n\nOverride the view's `create_object` method to change the creation process.\n\n### Changelist link\n\nThe dropdown will include a link to the changelist of the given model if you\npass in the view name for the changelist view.\n\n```python\n# urls.py\nurlpatterns = [\n ...\n path('autocomplete/', AutocompleteView.as_view(), name='my_autocomplete_view'),\n path('city/change/', CityChangelistView.as_view(), name='city_changelist'),\n]\n\n# forms.py\nwidget = MIZSelect(City, url='my_autocomplete_view', changelist_url='city_changelist')\n```\n\n### Inline edit link\n\nProvide a `edit_url` to attach a link to the edit/change page for each selected item.\n\n```python\n# urls.py\nurlpatterns = [\n ...\n path('person/edit/<path:object_id>/', PersonChangeView.as_view(), name='person_change'),\n]\n\n# forms.py\nwidget = MIZSelect(Person, edit_url='person_change')\n```\n\n![Preview of the edit button](https://raw.githubusercontent.com/Actionb/mizdb-tomselect/main/demo/images/edit2.png \"Edit button preview\")\n\n> NOTE: Also see [Add & Edit popup response](#add--edit-popup-response)\n\n### Filter against values of another field\n\nUse the `filter_by` argument to restrict the available options to the value of\nanother field. The parameter must be a 2-tuple: `(name_of_the_other_form_field, django_field_lookup)`\n\n```python\n# models.py\nclass Person(models.Model):\n name = models.CharField(max_length=50)\n pob = models.ForeignKey(\"Place of Birth\", on_delete=models.SET_NULL, blank=True, null=True)\n\n\nclass City(models.Model):\n name = models.CharField(max_length=50)\n\n\n# forms.py\nclass PersonCityForm(forms.Form):\n city = forms.ModelChoiceField(queryset=City.objects.filter(is_capitol=True))\n person = forms.ModelChoiceField(\n queryset=Person.objects.all(),\n widget=MIZSelect(\n Person,\n filter_by=(\"city\", \"pob_id\")\n )\n )\n```\n\nThis will result in the Person result queryset to be filtered against\n`pob_id` with the current value of the `city` formfield.\n\n![Example for the filter_by argument](https://raw.githubusercontent.com/Actionb/mizdb-tomselect/main/demo/images/filterby.png \"Filtering example\")\n\nNOTE: When using `filter_by`, the declaring element now **requires** that the other field\nprovides a value. If the other field does not have a value, the search will not\nreturn any results.\n\n### Add & Edit popup response\n\nAfter adding new objects with the 'add' button or after editing selected objects with the\n'edit' button, the options of the 'parent' form will still need to be updated.\nThis can be done by using the `PopupResponseMixin` view mixin with your CreateViews and UpdateViews.\n\n```python\nfrom mizdb_tomselect.views import PopupResponseMixin\n\nclass CityCreateView(PopupResponseMixin, CreateView):\n ...\n\n\nclass PersonChangeView(PopupResponseMixin, UpdateView):\n ...\n```\n\nYou also need to modify the template for the Create-/UpdateView by adding a hidden field to the form:\n```html\n<form>\n...\n{% if is_popup %}\n <input type=\"hidden\" name=\"{{ is_popup_var }}\" value=\"1\">\n{% endif %}\n...\n</form>\n```\n\nWith all this in place, tabs opened from (left-)clicking an add or edit button will be\ntreated as a popup. When submitting a popup form, the view redirects to a popup response\ntemplate. That template loads some javascript that updates the form of the opener window\nthat created the popup. The popup window or tab is then closed. \nThis is, roughly, a slimmed down version of how django admin handles popups for related objects.\n\n### Overwrite settings\n\nTo change MIZSelect or [TomSelect settings](https://tom-select.js.org/docs/), you can add a handler for the `initMIZSelect` event.\nThe event is dispatched before the TomSelect constructor is called. \nThe target of the event is the element that is about to be initialized.\nYou can pass your own settings to the init function `initMIZSelect` that is attached to the target element.\nFor example, to overwrite the title of the remove buttons:\n```javascript\nwindow.addEventListener('initMIZSelect', (e) => {\n const elem = e.target\n const mySettings = { plugins: { remove_button: { title: 'Remove This' } } }\n elem.initMIZSelect(mySettings)\n})\n```\nThe settings will be merged with the default MIZSelect settings, and the TomSelect constructor\nwill be called with the merged settings.\n\n----\n\n## Development & Demo\n\n```bash\npython3 -m venv venv\nsource venv/bin/activate\nmake init\n```\n\nSee the demo for a preview: run `make init-demo` and then start the demo server `python demo/manage.py runserver`.\n\nRun tests with `make test` or `make tox`. To install required browsers for playwright: `playwright install`.\nSee the makefile for other commands.\n",
"bugtrack_url": null,
"license": "",
"summary": "Django autocomplete widgets and views using TomSelect",
"version": "0.10.0",
"project_urls": {
"Source": "https://github.com/Actionb/mizdb-tomselect"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "2af64f56e03d3e6b4411276deef51d82d179eae3a6054ced99c0f92b8f607665",
"md5": "a7947a3552c240ce1e28e795dc2868e0",
"sha256": "6b9f0921af2d966509bb31f5ee0e6647dad26a71a514d3b1c54edb452d49308a"
},
"downloads": -1,
"filename": "mizdb_tomselect-0.10.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "a7947a3552c240ce1e28e795dc2868e0",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 63140,
"upload_time": "2023-11-14T11:34:16",
"upload_time_iso_8601": "2023-11-14T11:34:16.117585Z",
"url": "https://files.pythonhosted.org/packages/2a/f6/4f56e03d3e6b4411276deef51d82d179eae3a6054ced99c0f92b8f607665/mizdb_tomselect-0.10.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "ab9fed8330e6fda267b95e8e3d99bccfa24634bdc9426309059c5da0df0a6e14",
"md5": "7007a579a637dece68e59451dd23d5b3",
"sha256": "9db6b2627593405447b67c177a8d5bfd724fc6857235e448b08cbb13457746a1"
},
"downloads": -1,
"filename": "mizdb-tomselect-0.10.0.tar.gz",
"has_sig": false,
"md5_digest": "7007a579a637dece68e59451dd23d5b3",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 70191,
"upload_time": "2023-11-14T11:34:18",
"upload_time_iso_8601": "2023-11-14T11:34:18.311237Z",
"url": "https://files.pythonhosted.org/packages/ab/9f/ed8330e6fda267b95e8e3d99bccfa24634bdc9426309059c5da0df0a6e14/mizdb-tomselect-0.10.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-11-14 11:34:18",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Actionb",
"github_project": "mizdb-tomselect",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [
{
"name": "Django",
"specs": [
[
"==",
"4.2.1"
]
]
},
{
"name": "coverage",
"specs": [
[
"==",
"7.3.1"
]
]
},
{
"name": "tox",
"specs": [
[
"==",
"4.5.2"
]
]
},
{
"name": "pytest",
"specs": [
[
"==",
"7.3.1"
]
]
},
{
"name": "pytest-django",
"specs": [
[
"==",
"4.5.2"
]
]
},
{
"name": "pytest-xdist",
"specs": [
[
"==",
"3.3.1"
]
]
},
{
"name": "pytest-cov",
"specs": [
[
"==",
"4.1.0"
]
]
},
{
"name": "pytest-playwright",
"specs": [
[
"==",
"0.3.3"
]
]
},
{
"name": "playwright",
"specs": [
[
"==",
"1.34.0"
]
]
},
{
"name": "black",
"specs": [
[
"==",
"23.3.0"
]
]
},
{
"name": "ruff",
"specs": [
[
"==",
"0.0.270"
]
]
},
{
"name": "build",
"specs": [
[
"==",
"0.10.0"
]
]
},
{
"name": "twine",
"specs": [
[
"==",
"4.0.2"
]
]
},
{
"name": "factory_boy",
"specs": [
[
"==",
"3.2.1"
]
]
}
],
"tox": true,
"lcname": "mizdb-tomselect"
}
JSON
