I was having trouble while using dal and tried to build a simple example.
I did almost the exactly the same as Django autocomplete light: field not populated and also applied the answer of the link.
Here are the steps I went through:
Step 1) When I add like this on header of html (just the same as the above answer):
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script>
The error of browser inspector console is like this:
Uncaught ReferenceError: yl is not defined(anonymous function) @ autocomplete.init.js:75select2.js:117
Uncaught ReferenceError: yl is not defined(anonymous function) @ select2.js:117
Step 2) So I added jquery.js and other js files on the dal library:
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script>
And the error changed like this:
select2.js:66 Uncaught TypeError: $(...).select2 is not a function(anonymous function) @ select2.js:66dispatch @ jquery.js:4435elemData.handle @ jquery.js:4121trigger @ jquery.js:4350(anonymous function) @ jquery.js:4901each @ jquery.js:374each @ jquery.js:139trigger @ jquery.js:4900initialize @ autocomplete.init.js:45each @ jquery.js:374each @ jquery.js:139(anonymous function) @ autocomplete.init.js:50fire @ jquery.js:3099fireWith @ jquery.js:3211ready @ jquery.js:3417completed @ jquery.js:3433
Step 3) And for the last, I found these two plugins and added and it worked!
Plugins of [Step 2)] +
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
So here are my questions:
A) Should I add all the plugins above? For example, there are two select2.js on the plugins of [step 3)] and I'm confused and wonder if they work on different ways.(If I remove one of them, it doesn't work.)
B) According to the question Django autocomplete light: field not populated, shouldn't step 2 work? Why does it occur the error?
C) On this sample code, the part of following code seems not working at all. If not with admin account, the foreign key doesn't appears on the text field, in other words, nothing can be found on the list. (from the dal tutorial, it allows 'Using autocompletes outside the admin')
{% block footer %}
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
{{ form.media }}
{% endblock %}
@ I also checked django-autocomplete-light not working - select2 is not a function and rearrange the installed app didn't work.