2017-10-05 6 views
0

フォームにオートコンプリートフィールドを追加しようとしています。しかし、私は働くことができません。私はほとんどすべてのチュートリアルを試しました。 リクエストはうまく送信されていますが、私は200回応答します。開発ツールのペインで、リクエストをクリックすると、[Response]タブでHTMLファイル全体が表示されます。ジャソンは何かを形成するべきではない.. .. ?? は、ここでは、コードです: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 /'へのリクエストからの応答を含めてください。 –

答えて

0

まず最初に、Djangoを使用している場合は、URLの名前を変更するとコメントのどこでも変更する必要がないため、このようにURLを入力することをお勧めします。source: "get_signers/",の代わりにsource: "{% url 'get_signers' %}",

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) 
:私はあなたに私のコードを与える私の作業ケースを提供するために

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

:今私はあなたにコードを変更示唆質問に戻る

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>