django-autocomplete-light教程: select2 is not a function error

Question

我在使用dal时遇到麻烦，并尝试构建一个简单的示例。

我所做的几乎与Django autocomplete light: field not populated完全相同，并且还应用了链接的答案。

这是我经历的步骤:

步骤1)当我在html的 header 上添加这样的内容时(与上面的答案相同):

    <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>

浏览器检查器控制台的错误是这样的:

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

步骤2)因此，我在dal库中添加了jquery.js和其他js文件:

    <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>

错误更改如下:

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

第3步)最后，我找到了这两个插件并添加了它，并且可以正常工作!

    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>

所以这是我的问题:

A)我应该添加上面的所有插件吗？例如，在[步骤3)]的插件上有两个select2.js，我很困惑，想知道它们是否以不同的方式工作。(如果我删除其中一个，那就行不通了。)

B)根据问题 Django autocomplete light: field not populated，第2步不起作用吗？为什么会发生错误？

C)在此示例代码上，下面的代码部分似乎根本不起作用。如果没有管理员帐户，则外键不会出现在文本字段中，换句话说，列表中将找不到任何内容。 (从 dal tutorial，它允许“在管理员外部使用自动完成功能”)

{% block footer %}
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
{{ form.media }}
{% endblock %}

@我还检查了 django-autocomplete-light not working - select2 is not a function并重新排列了已安装的应用程序无法正常工作。

Answer 1

首先，您需要包括Jquery，然后是您的用于选择字段的第三方库。

Select2.min.js(JS文件的简化版本)

Select2.min.css(CSS文件的简化版本)

然后导入autocomplete.js