Django JQuery自动完成

问题描述:

我想向我的表单添加自动填充字段。但我不能工作。我已经尝试过几乎所有的教程。 请求发送正常,我得到一个200响应。在“开发人员工具”窗格中,单击请求时,在“响应”选项卡上,我会看到整个HTML文件。不应该有一个JSON格式化的东西.. ?? 下面的代码:Django JQuery自动完成

models.py

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

views.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 %} 
+0

_“的jQuery的,但我不能吨至工作“_什么不工作? –

+0

@PacoH。当我输入一些数字时,没有结果显示在输入字段下面,就像我看到的 – Danae

+0

一样。试试[JsonResponse](https://docs.djangoproject.com/en/1.11/ref/request-response/#jsonresponse-objects)。如果它不起作用,请将请求的响应包含到'get_signers /' –

首先,因为您使用的是Django,我建议您按名称输入网址,如果您更改视图的网址,则无需在注释中随处更改,以代替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) 

提供我工作的情况下,我会给你我的代码:

views.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 !--> 
<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>