Twitterの先読みテキストが表示されない空白のドロップダウン

Question

typeaheadに問題がありますが、入力中に候補のドロップダウンボックスが表示されますが、テキストは表示されません。私がそれがちょうど無作為なドロップダウンであったかどうか見るために私が知っている単語は、私のjsonファイルとそうでない単語に入っています。私のデータベースにない単語を入力すると、ドロップダウンボックスが削除されるので、実際にはjsonファイルの実際のテキストなしで動作しています。また、検索ボックスに入力する際に​​、私はPythonコンソール内でクエリが作成されていることを確認します。

jsonに「Number theory」と入力すると、ドロップダウンがテキストなしで表示されます。

私は私のjsonフォーマットがhttp://jsonlint.com/を使用して、正しいことを確認しました。テキストがドロップダウンボックスに表示されないのはなぜですか？

これが私の見解です：

def search_subclasss(request): 

    q = request.GET.get('subclass', '') 
    sub_classs = SubClasss.objects.filter(subclasss__icontains=q) 
    results = [] 

    for subclasss in sub_classs: 

     results.append([subclasss.subclasss, subclasss.subject_id]) 

    data = json.dumps(results) 

    return HttpResponse(data, content_type='application/json') 

は、これは私のhtmlです：フォームウィジェットで

<div class="form-group"> 
    <div id="remote"> 
     {% render_field form_post.subclass %} 
    </div> 
</div> 

：

widget = {'subclass': forms.TextInput(attrs={'class': 'form-control typeahead', 'placeholder': 'class/subclass'}), 

<script type="text/javascript"> 
     var bestPictures = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('subclasss'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 

      remote: { 
       url: "{% url 'search_subclasss' %}?subclass=%QUERY", 
       //url: '/search_subclasss/?subclass=%QUERY', 
       wildcard: '%QUERY' 
      } 
     }); 

     $('#remote .typeahead').typeahead(null, { 
      name: 'subclasss', 
      display: 'subclasss', 
      limit: 10, 
      source: bestPictures 
     }); 
    </script> 

私のフォームは、次のようにレンダリングされます

Answer 1

フィルターを実行した後、私は自分の問題をPython辞書dict_subclasssを作成して解決しました。その後、私はそれぞれdict_subclassをresults配列に追加するだけです。これで、ビューからテンプレートにjsonを送信できます。

def search_subclasss(request): 
    q = request.GET.get('subclass', '') 
    sub_classs = SubClasss.objects.filter(subclasss__icontains=q) 
    results = [] 

    for subclasss in sub_classs: 
     dict_subclass = { 
      'subject': subclasss.subject_id, 
      'subclasss': subclasss.subclasss, 
     } 
     results.append(dict_subclass) 

    data = json.dumps(results) 

    return HttpResponse(data, content_type='application/json') 

私はこのことから何を得るのですか？よくtwitter-typeaheadは、それがjsonフォーマットを受け取る方法を非常に選択的です。

[{"subject": "AGR", "subclasss": "Agroecology"}, {"subject": "AGR", "subclasss": "Agronomy"},...,{"subject": "TR", "subclasss": "Operations research"}, {"subject": "TR", "subclasss": "Mass transit"}] 

をそして私は前にやったことはjson結果与えたこのresults.append([subclasss.subclasss, subclasss.subject_id])た：

[["Agroecology", "AGR"], ["Agronomy", "AGR"],...,["Operations research", "TR"], ["Mass transit", "TR"]] 

を

上記のコードは、あなたのJavaScripttypeaheadが正しく解釈することができ、このようなjsonを与えます

両方とも正しいですがjson形式の場合、keyはvalueと同じくらい重要です。クエリマッチングを実行するために表示され使用される検索フィールドを指定する必要があります。