Django JQuery 自动完成

Question

我正在尝试向我的表单添加自动完成字段。但我无法去上班。我几乎尝试了所有教程。请求发送正常，我收到 200 响应。在开发人员工具窗格中，当我单击请求时，在“响应”选项卡上我会看到整个 HTML 文件。不应该有一个 json 格式的东西吗？？这是代码：

模型.py

class Signers(models.Model):
    uid = models.IntegerField(primary_key=True)
    firstName = models.CharField(max_length=255)
    lastName = models.CharField(max_length=255)

视图.py

def get_signers(request):
  if request.is_ajax():
    q = request.GET.get('term', '')
    signers = Signers.objects.filter(uid__icontains=q)[:20]
    results = []
    for s in signers:
      signer_json = {}
      signer_json['id'] = s.uid
      signer_json['label'] = s.uid
      signer_json['value'] = s.uid
      results.append(signer_json)
    data = json.dumps(results)
    print data
  else:
    data = 'fail'
  mimetype = 'application/json'
  return HttpResponse(data,mimetype)

urls.py

url(r'^get_signers/', views.get_signers, name='get_signers'),

praxis.html（我的模板）

<script>

  $(function() {
    $("#id_signerIds").autocomplete({
      source: "get_signers/",
      minLength: 2,
    });
  });

</script>

<script>
$(document).ready(function() {

              $('#id_submissionTimestamp').hide();
              $('#id_issueDate').hide();
});
</script>

{% endblock page_head %}


{% block content %}

<form method="POST" class="post-form">{% csrf_token %}

<!--some other fields here... -->

<div class="ui-widget">
  <label for="id_signerIds">Signers: </label>
  <input id="id_signerIds">
</div>

<button type="submit" class="save btn btn-default">Save</button>

 </form>

{% endblock %}

Answer 1

首先，当您使用 Django 时，我建议您按名称输入 url，就像这样，如果您更改视图的 url，则无需在注释中的所有位置更改它，因此source: "get_signers/",您可以这样做source: "{% url 'get_signers' %}",。

现在回到问题我建议你将代码更改为：

signers = Signers.objects.filter(uid__icontains=q)[:20]
results = []
for signer in signers:
    signer_json = signer.name
    results.append(signer_json)

为了提供我的工作案例，我会给你我的代码：

视图.py

def company_autocomplete(request):
    if request.is_ajax():
        query = request.GET.get("term", "")
        companies = Company.objects.filter(name__icontains=query)
        results = []
        for company in companies:
            place_json = company.name
            results.append(place_json)
        data = json.dumps(results)
    mimetype = "application/json"
    return HttpResponse(data, mimetype)

urls.py

url(r'^api/company-autocomplete/', company_autocomplete, name='company-autocomplete'),

add_company.html

...
<div class="form-group bmd-form-group">
  <label class="bmd-label-static" 
         for="company_autocomplete_input">Cerca azienda</label>
  <input id="company_autocomplete_input" class="form-control"
         placeholder="Nome azienda" style="width:500px">
</div>
... 
<button class="btn btn-raised btn-primary" type="submit"
        style="background-color:#1A88B9;">Aggiungi</button>
<script>
  $(function() {
    $("#company_autocomplete_input").autocomplete({
      source: "{% url 'company-autocomplete' %}",
      minLength: 1,
    });
  });
</script>
...

最重要的是：一定要在自动完成输入之前添加 jQuery

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