CODEWITHSUNDEEP
djangodjango-autocomplete-light
max
max

Reputation: 10464

using django-autocomplete-light outside admin view

I've read http://django-autocomplete-light.readthedocs.io/en/master/tutorial.html#using-autocompletes-outside-the-admin

and tried to use the widget within a simple html page but it does not work and there are no JavaScript or Python errors. Here is my code:

# models.py
class Doctor(models.Model):
    name = models.CharField(max_length=200)
    address = models.CharField(max_length=200, null=True, blank=True, default='')
    def __unicode__(self):
        return self.name

class Patient(models.Model):
    name = models.CharField(max_length=200)
    sample = models.OneToOneField(Sample, null=True, blank=True)
    doctor = models.ForeignKey(Doctor, null=True, blank=True, default=None)
    def __unicode__(self):
        return self.name

# views.py
class DoctorAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        if not self.request.user.is_authenticated():
            return Doctor.objects.none()

        qs = Doctor.objects.all()
        if self.q:
            qs = qs.filter(name__icontains=self.q)

        return qs


class DocForm(autocomplete.FutureModelForm):
    class Meta:
        model = Doctor
        fields = ('name',)
        widgets = {
            'doctor': autocomplete.ModelSelect2(url='doc-autocomplete'),
        }

class Index(generic.UpdateView):
    model = Doctor
    form_class = DocForm
    template_name = 'index.html'
    success_url = reverse_lazy('index')

    def get_object(self):
        return Doctor.objects.first()


# index.html
<html>
<head>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
</head>
<body>
Welcome
    <div>
        <form action="" method="post">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" />
        </form>
    </div>
</body>
</html>

All I want is to use their nice select2 widget to list doctor names with doctor ids as values in an autocomplete. I can do it without django-autocomplete-light, but I explicitly want to learn how to do it with their widget that looks nicer. Can someone please guide me to get it working?

Upvotes: 2

Views: 2548

Answers (2)

raratiru
raratiru

Reputation: 9636

Update

You should override the widget of the 'doctor' attribute int the Patient model instead of the Doctor model:

class DocForm(autocomplete.FutureModelForm):
    class Meta:
        model = Patient
        fields = ('doctor',)  # or ('__all__')
        widgets = {
            'doctor': autocomplete.ModelSelect2(url='doc-autocomplete'),
        }

Also, make sure that visiting the reverse('doc-autocomplete') url gives the expected results, for the logged in user, as explained in the autocomplete tutorial.

Trying to solve a similar issue, I found out that I did not include {{ form.media }} in my template.

It is described in the docs:

{% block footer %}
<script type="text/javascript" src="/static/collected/admin/js/vendor/jquery/jquery.js"></script>

{{ form.media }}
{% endblock %}

Upvotes: 2

max
max

Reputation: 10464

I got it:

class PatForm(autocomplete.FutureModelForm):
    class Meta:
        model = Patient
        fields = ('doctor',)
        widgets = {
            'doctor': autocomplete.ModelSelect2Multiple(url='doc-autocomplete'),
        }

class Index(generic.UpdateView):
    model = Patient
    form_class = PatForm
    template_name = 'index.html'
    success_url = reverse_lazy('index')

    def get_object(self):
        return Doctor.objects.first()

which produces:

enter image description here

if you replace ModelSelect2Multiple with ModelSelect2 then you'll get: enter image description here

Upvotes: 1

Related Questions