Twitter的预输入没有显示文本只是一个空白下拉

问题描述：

我有一个问题，我typeahead，建议下拉框中出现，同时打字但没有文字显示。我所做的，看它是否只是一个随机的下拉是输入的话，我知道是我json文件，并且不言语。当我键入未在我的数据库下拉框中被删除的话，那么它实际上是没有工作从json文件的实际文本。同时在搜索框中输入内容时，我在python控制台中看到正在进行查询。Twitter的预输入没有显示文本只是一个空白下拉

在这里你可以看到我输入“数论”就是在我json，你可以看到下拉菜单中没有出现任何文本。

我确信，我的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：

<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>

我的形式呈现：

<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'}),

答

我通过创建一个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格式非常有选择性。

上面的代码将会给你一个json这样，该JavaScripttypeahead可以正确地解释：

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

而且我做了什么之前是这样results.append([subclasss.subclasss, subclasss.subject_id])这给了json结果：

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

虽然两者都是正确json格式key是一样的value一样重要，需要指定将显示哪个搜索字段并用于执行查询匹配。

Twitter的预输入没有显示文本只是一个空白下拉

相关推荐