Django jquery自动完成给出错误

时间:2016-08-20 18:48:27

标签: javascript jquery python django autocomplete

我正在开发一个django应用程序,我正在使用jquery自动完成。我知道这个问题已在这里被多次询问,但没有一个解决方案适合我。我正在学习本教程:http://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/

我已将其包含在我的标题中:

   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />

以完全相同的顺序

然后在我的页面中,我使用了:

{% extends "account/base.html" %}

{% load i18n %}
{% load bootstrap %}

{% block body_class %}applications{% endblock %}

{% block head_title %}{% trans "Change password" %}{% endblock %}

{% block body %}




<form action="/create_recipe_rule/{{ recipe_pk }}/" method="post">
{% csrf_token  %}





<div class="form-group ui-widget">
<label for="{{ form.content.label }}">{{ form.content.label }}:</label>
<textarea type="{{ form.content.type }}" name="{{ form.content.name }}" max_length="500" class="form-control" id="recipe_rule_content"></textarea>
</div>

<script>
$(function() {
  $("#recipe_rule_content").autocomplete({
    source: "/api/get_RuleStatement/",
    minLength: 2,
  });
});
</script>


     <input class="btn btn-default" type="submit" value="submit">
</form>
{% endblock %}

有人可以建议我哪里出错吗?

这是我在控制台中遇到的错误:

  

未捕获TypeError:$(...)。autocomplete不是函数

1 个答案:

答案 0 :(得分:0)

看起来您的代码在加载jQueryUI之前执行。

移动你的

<script>
$(function() {
  $("#recipe_rule_content").autocomplete({
    source: "/api/get_RuleStatement/",
    minLength: 2,
  });
});
</script>

之后

<head>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

修改

code.jquery.com证书有问题。尝试 cdnjs

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">