Django: django-autocomplete-light does not work properly

Question

I'm using django-autocomplete-light in django 1.8. But I don't know how to use it in forms.py. Instead of autocomplete field I see a select field. I followed the instructions from here.

In models.py I have:

class icd_10(models.Model):
    id = models.IntegerField(unique=True,primary_key=True,null=False,blank=False)
    icd_10_desc = models.CharField('ICD-10 description',max_length=80,null=True,blank=True)
    icd_10_code = models.CharField('ICD-10 code',max_length=10,null=True,blank=True)


    def __str__(self):
        return str(self.icd_10_desc)

class Diagnosis(models.Model):

    diagnosis_option = models.ManyToManyField(DiagnosisOption)
    record_of_genotype = models.CharField(max_length=45,null=True,blank=True)
    icd_10_desc = models.ManyToManyField(icd_10)
    patient = models.ForeignKey(Demographic)

    def __str__(self):
        return str(self.patient)

In settings.py I have:

INSTALLED_APPS = (
    'dal',
    'dal_select2',
    'django.contrib.admin',
     ...
)

In views.py I have:

class IcdTenAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        #Don't forget to filter out results depending on the visitor !
        if not self.request.user.is_authenticated():
            return icd_10.objects.none()

        qs = icd_10.objects.all()

        if self.q:
             qs = qs.filter(icd_10_desc__istartswith=self.q)

        return qs

In urls.py I have:

url(r'^icd10-autocomplete/$','eReg.views.IcdTenAutocomplete',name='icd10-autocomplete'),

And in forms.py I have:

class DiagnosisForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):

        super(DiagnosisForm, self).__init__(*args, **kwargs)
self.helper.layout = Layout(
            Fieldset (
                # 'patient',
                '<b>Diagnosis information</b>',

                'diagnosis_option',
                'icd_10_desc',

                ),


            FormActions(
                Submit('submit', "Save changes"),
                Submit('cancel',"Cancel")
            ),
        )
        self.helper.form_tag = False
        self.helper.form_show_labels = True

    class Meta:
        model = Diagnosis
        exclude = ['patient', 'author']

        list_display = ('patient', 'pub_date', 'author')
        widgets={'icd10_desc' : autocomplete.ModelSelect2Multiple(url='icd10-autocomplete')}

When I run it directly from browser it works properly. I get

{"pagination": {"more": false}, "results": [{"text": "Thalassemia", "id": 8}, {"text": "Thalassemia trait", "id": 12}, {"text": "Thalassemia, unspecified", "id": 15}]}

So, do I miss a proper javascript?

Answer 1

I found the solution! I had to include the code below in my template:

{% block footer %}

<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>

{{ frm.media }}

{% endblock %}

And the code below in base.html from which my template inherits data.

<link src="/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link src="/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/collected/autocomplete_light/select2.js"></script>