Twitter typeahead 不显示文本只显示一个空白下拉列表答案

【问题标题】：Twitter typeahead not showing text only a blank drop downTwitter typeahead 不显示文本只显示一个空白下拉列表
【发布时间】：2017-01-10 06:09:29
【问题描述】：

我的typeahead 有问题，输入时会出现建议下拉框，但没有显示任何文字。为了查看它是否只是一个随机的下拉菜单，我所做的是输入我知道在我的json 文件中的单词和不在的单词。一旦我键入不在我的数据库中的单词，下拉框就会被删除，因此它实际上可以在没有 json 文件中的实际文本的情况下工作。同样在搜索框中输入时，我在 python 控制台中看到正在进行查询。

在这里，您可以看到我在json 中输入“数论”，因为您可以看到没有任何文字的下拉列表。

我使用http://jsonlint.com/ 确保我的json 格式正确。为什么下拉框中没有显示文字？

这是我的看法：

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

【问题讨论】：

标签： json django typeahead.js

【解决方案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 格式方面非常有选择性。

上面的代码会给你一个像这样的json，JavaScript typeahead 可以正确解释：

[{"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 一样重要，并且需要指定将显示哪个搜索字段并用于执行查询匹配。

【讨论】：