Question

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

在这里你可以看到我输入数字理论＆＃39;就在我的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'}),

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不显示文本只有一个空白下拉列表

1 个答案: