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

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

我要出现的搜索结果如下:(显示姓名、主题和表格/类(class))

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>")
    }