Django 和 Jquery 自动完成问题答案

【问题标题】：Django and Jquery Autocomplete IssuesDjango 和 Jquery 自动完成问题
【发布时间】：2021-12-27 22:40:29
【问题描述】：

我知道有几篇关于自动完成和 django 的帖子，但我最近进入了 jquery 领域，不知何故我迷路了。你可以想象，我需要一个自动完成以下字段：

HTML 文件

<div class="ui-widget">
     <input name="user_name"class="form-control "id="company-search">
</div>

  <script type="text/javascript">
            $(function() {
                $("#company-search").autocomplete({
                    source: '{% url 'autocomplete' %}',
                    minLength: 1,
                });
            });
    </script>

网址

path('autocomplete/',views.autocomplete, name='autocomplete')

观看次数

def autocomplete(request):
    data  = request.GET['term']
    forecast = LeadEntry.objects.select_related('lead_id')
    companies = [str(i.lead_id.company).lower() for i in forecast]
    search = [i for i in companies if i.startswith(data.lower()) ]

    result = []
    for company in search:
        data = {}
        data['label'] = company
        data['value'] = company
        result.append(data)
    print(json.dumps(result))
    mimeetype='application/json'
    return HttpResponse(json.dumps(result),mimeetype)

请注意，ajax 部分运行良好，我每次都能看到视图正常运行，我输入一个新字母，我得到一个包含正确数据的 json 文件。

我实际上可以看到结果，但实际值在右上角

我在 javascript 端收到以下错误：

问候

【问题讨论】：

我觉得你的问题出在jQuery UI版本上，用CDN 1.13.0版本的jQuery UI看看能不能用？ <script src = "https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"> </script>
谢谢，你应该已经添加了一个答案，解决了这个问题，我知道它必须是这样的，因为逻辑很简单，并且自动完成工作正常，但是位置不正确跨度>

标签： jquery django jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

cmets部分的答案似乎已经解决了问题，帮助别人我写在这里：

问题在于jQuery UI版本，使用CDN版本1.13.0 jQuery UI：

<script src = "https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"> </script>

【讨论】：

【解决方案2】：

来自 jQuery docs 的 autocomplete 的 source 属性需要一个关键字列表，但您传递给它的是一个 django url。

您需要先点击您的 django 网址最有可能使用 ajax GET 调用来获取关键字列表，然后将该关键字列表放入自动完成源属性中。

【讨论】：