django 2 Jquery 自动完成答案

【问题标题】：django 2 Jquery autocompletedjango 2 Jquery 自动完成
【发布时间】：2018-09-05 08:37:39
【问题描述】：

我无法让我的 autocomplete 框显示结果。我不确定我是否没有从 Django 导入我需要的东西。任何帮助是极大的赞赏。谢谢！

views.py

    def contact_name_search(request):
        if request.is_ajax():
            q = request.GET.get('term','')
            names = PhoneBook.objects.filter(first_name__istartswith=q)
            result = []
            for n in names:
                name_json = n.full_name
                result.append(name_json)
            data = json.dumps(result)
        mimetype = 'application/json'
        return HttpResponse(data, mimetype)

urls.py

    path('contact-name-search/', views.contact_name_search, name='contact-name-search'),

main.html

    <div>
        <input type="text" id="contact_name_search_input" name="contact_name_search" />
    </div>
    <script>
    $(function() {
        $("#contact_name_search_input").autocomplete({
            source: "{% url 'contact-name-search' %}",
            minLength: 1,
            delay: 200,
        });
    });
    </script>

【问题讨论】：

将 name="contact_name_search" 更改为 name="term"
你的视图真的被调用了吗？尝试从视图内部打印q 以检查。
我尝试更改名称；还是不行。我还尝试打印q，它没有显示任何内容。我不认为它正在发送信息。我有另一个有效的 AJAX 搜索，当我输入一个字母时，它会显示在终端中。当我在这个中输入一个字母时，它不会显示在终端中。

标签： jquery django python-3.x

【解决方案1】：

我没有意识到 jQuery 和 jQuery.ui 是两个不同的东西。我没有链接jQuery.ui，然后当我链接时，它仍然不起作用，因为我在jquery 之前链接了jQuery.ui。

应该是这样的：

    # jQuery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    # jQuery.ui
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

现在工作得很好！

【讨论】：

我在控制台中收到Uncaught TypeError: $(...).autocomplete is not a function 错误。你能指出一个可能的原因吗？谢谢。
那么 jQueryUI 可能没有加载。检查您的文件以获取正确的参考。 jQueryUI autocomplete点击查看源码。
我用this page上的示例脚本中的那些替换了所有的jQuery文件（那些包含在你的答案中-jquery.min.js、jquery-ui.css和jquery-ui.min.js），但状态仍然是同样，即仍然得到相同的.autocomplete is not a function 错误。我注意到链接页面上的.js 和.css 文件与您使用的版本不同。但是，使用这些并没有帮助。一个想法 - 我已将 url 放在 项目根目录 中。应该这样吗？
另一个想法。您指的是一个论点('term','')。它应该做什么，它是从哪里提取的？谢谢。
我在页脚引用了jquery.js。删除所有的差异，没有更多的错误，现在它的工作伟大。

【解决方案2】：

是因为找不到名字'contact-name-search'的原因吗？可能缺少应用名称或尝试将名称更改为“contact_name_search”

【讨论】：