Twitter typeahead 不显示文本只有一个空白的下拉

Question

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

在这里你可以看到我在我的 json 中输入 'Number theory'，因为你可以看到下拉菜单显示时没有任何文本。

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

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

上面的代码会给你一个像这样的 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 一样重要，并且需要指定将显示和用于执行搜索的搜索字段查询匹配。

Twitter typeahead 不显示文本只有一个空白的下拉

Twitter typeahead not showing text only a blank drop down

django

json

typeahead.js