django-autocomplete-light教程：select2不是函数错误

I was having trouble while using dal and tried to build a simple example.

我在使用dal时遇到了麻烦并试图构建一个简单的例子。

I did almost the exactly the same as Django autocomplete light: field not populated and also applied the answer of the link.

我做的几乎和Django autocomplete light完全一样：字段没有填充，也应用了链接的答案。

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

步骤1）当我在html的标题上添加这样的内容时（与上面的答案相同）：

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

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

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!

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

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

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

B) According to the question Django autocomplete light: field not populated, shouldn't step 2 work? Why does it occur the error?

B）根据问题Django自动完成灯：字段没有填充，不应该第2步工作？为什么会出现错误？

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

C）在此示例代码中，以下代码的部分似乎根本不起作用。如果没有管理员帐户，则外键不会出现在文本字段中，换句话说，在列表中找不到任何内容。（从dal教程，它允许'在管理员之外使用自动填充'）

{% 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.

@我还检查了django-autocomplete-light不工作 - select2不是一个功能，重新安排已安装的应用程序无法正常工作。

2 个解决方案

#1

First you need to include Jquery and after that your third-party library for selection field.

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

Select2.min.js(Minified version of the JS file)
Select2.min.js（JS文件的缩小版）
Select2.min.css(Minified version of the CSS file)
Select2.min.css（CSS文件的缩小版）
Then import autocomplete.js
然后导入autocomplete.js

#2

the first select2 library file does not exists. selected link raise Host Not Found Error

第一个select2库文件不存在。选择的链接引发主机未找到错误

select2 library is same if you comment first one it not raised error. you can download library into your static folder.

select2库是相同的，如果你先评论它没有引发错误。您可以将库下载到静态文件夹中。

also jquery link in the last example does not exists. you can download jquery and put it into static folder.

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

#1