Question

我无法将远程json数据访问到typeahead.js。我尝试使用prefetch example检索笔记，并能够使用 typeahead.js 进行搜索，但只能获取仅包含值的简单json笔记。

我使用的json数据文件是 data / notes_simple.json 。

["Atomic Energy", "Introduction to Biology", ...]

搜索结果如下： （仅显示名称）

Electromagnetism
Introduction to Biology

我希望能够使用 data / notes.json ，其中包含键和值。

[{
    "name": "Electromagnetism",
    "subject": "Physics",
    "form": "4"
}, {
    "name": "Introduction to Biology",
    "subject": "Biology",
    "form": "1"
...

我想要出现的搜索结果如下： （显示姓名，主题和表格/类别）

Electromagnetism
Physics - Form 4

Introduction to Biology
Biology - Form 1

我怎样才能获得上述内容？

我的 js / prefetch.js 如下所示：

$(function() {
    var notes = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 10,
        prefetch: {
            url: 'data/notes_simple.json',
            filter: function(list) {
                return $.map(list, function(country) {
                    return {
                        name: country
                    };
                });
            }
        }
    });

    notes.initialize();

    $('#prefetch .typeahead').typeahead(null, {
        name: 'notes',
        displayKey: 'name',
        source: notes.ttAdapter()
    });

});

您可以在此处找到我的托管项目：http://goo.gl/7kPVk2

感谢任何帮助。

Answer 1

这里可以看到一个如何做类似事情的例子：

http://jsfiddle.net/Fresh/u4fq85bj/

您需要更改对notes.json的远程调用，并适当修改过滤器，例如

remote: {
    url: '/notes.json',
    filter: function (notes) {
        return $.map(notes, function (note) {
            return {
                name: note.name,
                subject: note.subject,
                form: note.form
            };
        });
    }
}

要以所需格式显示结果，您可以使用带有标记的Handlebars模板引擎，如下所示：

templates: {
 suggestion: 
  Handlebars.compile("<p>{{name}}</p><p>{{subject}} - Form {{form}}</i></p>")
    }

使用typeahead.js从json数据中检索多个值

1 个答案: