django-autocomplete-light 教程：select2 is not a function 错误

Question

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

我做的和几乎一模一样，也应用了link的答案。

以下是我完成的步骤：

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

browser inspector控制台报错是这样的：

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) 所以我在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) 根据问题，第 2 步不应该起作用吗？为什么会出现这个错误？

C) 在此示例代码中，以下代码部分似乎根本不起作用。如果不是管理员帐户，外键不会出现在文本字段中，换句话说，列表中找不到任何内容。（来自dal tutorial，它允许'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 %}

@我也检查了并重新排列安装的应用程序没有工作。

Answer 1

第一个select2库文件不存在。已选择 link 引发找不到主机错误

select2 库是相同的，如果你评论第一个它不会引发错误。您可以将库下载到静态文件夹中。

也jquery link 在最后一个例子中不存在。您可以下载 jquery 并将其放入静态文件夹。

Answer 2

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

Select2.min.js(JS文件的缩小版)
Select2.min.css（CSS 文件的缩小版）
然后导入autocomplete.js

django-autocomplete-light 教程：select2 is not a function 错误

django-autocomplete-light tutorial: select2 is not a function error

django

jquery-select2

django-autocomplete-light