PRO Only


AjaxModelSelect and AjaxMultipleModelSelect provides autocomplete widgets for the django-material. Unlike other implementations, they not requires a separate autocomplete view registered. Instead, the autocomplete widgets sends HTTP OPTIONS request to the same view. So the same user permissions check would be applied, and the same form could be utilized to form autocomplete suggestions list.

Function based view integration sample:

from django.http import JsonResponse, QueryDict
from material.forms import AjaxModelSelect, get_ajax_suggestions

class AddressForm(forms.ModelForm):
    class Meta:
        model = Address
        fields = ['city', 'street', 'flat']
        widgets = {
            'city': AjaxModelSelect(lookups=['name__icontains'])

 def address(request):
     form = AddressForm(request.POST or None)

     if request.method == 'OPTIONS':
         query = self.request.META.get('HTTP_X_REQUEST_AUTOCOMPLETE', self.request.body)
         options = QueryDict(query, encoding=request.encoding)
         field = form.base_fields.get(options.get('field'))
         query = options.get('query')

         if field is None or query is None:
             return JsonResponse({'error': 'Field or Query is missing'}, status=400)
         return JsonResponse({
             'suggestions': get_ajax_suggestions(field, query)
     elif form.is_valid():
         return redirect('success')

     return render(request, 'address.html', {'form': form})

Class based view integration sample:

from material.forms import FormAjaxCompleteMixin

class AddressFormView(FormAjaxCompleteMixin, generic.CreateView):
    model = Address
    form_class = AddressForm
class material.forms.AjaxModelSelect(*args, **kwargs)

A widget for ModelChoiceField with ajax based autocomplete.

To get AJAX results, GET requests with the additional X-Requested-Content=Autocomplete http header are performed to the same url as the form view.

Expected response is json like:

    suggestions: [
        { value: 'Chicago Blackhawks', data: { id: 1 } },
        { value: 'Chicago Bulls', data: { id: 2 } }

lookups – list of field to query a model


class AddressForm(forms.Form):
    city = forms.ModelChoiceField(
class material.forms.AjaxMultipleModelSelect(*args, **kwargs)

A widget for ModelMultipleChoiceField with ajax based autocomplete.

class material.forms.FormAjaxCompleteMixin
material.forms.get_ajax_suggestions(field, query, max_results=25)

Default AJAX suggestion implementation


class material.forms.MediumEditorWidget(options=None, *args, **kwargs)

A WYSIWYG editor widget.


class OceanViewSet(ModelViewSet):
    model = models.Ocean
    form_widgets = {
        'description': MediumEditorWidget(
                'targetBlank': True,
                'toolbar': {
                    'buttons': ['h1', 'h2', 'h3', 'bold', 'italic', 'quote'],
                'placeholder': {'text': 'Click to edit'}