如何在预取、hogan 模板和多键 JSON 文件中使用 typeahead？

Question

我在这些版本状态下实现了hogan.js 和typeahead.js：

• Hogan 2.0.0
• Typeahead 0.9.3

我正在尝试升级到：

• Hogan 3.0.2
• Typeahead 0.10.5

这是我在插件升级之前的工作代码：

HTML

<div class="course_lookup">
    <div class="demo">
        <input class="typeahead" type="text" placeholder="Enter subject or subject area">
    </div>
</div>

jQuery

function searchReadyFunction() {
    $('.course_lookup .typeahead').typeahead({
        name: 'courses',
        valueKey: 'course_title',  
        prefetch: "/static/courses.json",
        template: [
            '<p class="course_area">{{course_area}}</p>',
            '<p class="course_title">{{course_title}}</p>',
            '<p class="course_description">{{course_description}}</p>'
        ].join(''),
        engine: Hogan  
    }).on('typeahead:selected', function(event, selection) {
        var course_name = selection.course_title.toLowerCase();
        // ...
    });
}

JSON

我的 JSON 数据结构是：

[
{ "course_area": "Area01", "course_title": "title01", "course_description": "Description text 01", "tokens":["title01","Area01"]},
{ "course_area": "Area02", "course_title": "title02", "course_description": "Description text 02", "tokens":["title02", "Area02"]},
{ "course_area": "Area03", "course_title": "title03", "course_description": "Description text 03", "tokens":["title03","Area03"]},
{ "course_area": "Area02", "course_title": "title04", "course_description": "Description text 04", "tokens":["title04","Area02"]},
{ "course_area": "Area02", "course_title": "title05", "course_description": "Description text 05", "tokens":["title05","Area02"]},
{ "course_area": "Area04", "course_title": "title06", "course_description": "Description text 06", "tokens":["title06", "Area04"]},
{ "course_area": "Area05", "course_title": "title07", "course_description": "Description text 07", "tokens":["title07", "Area05"]}
]

jsFiddle

jsFiddle shows original functionality achieved with older plugins。

搜索将匹配 JSON 文件中的token 值，并在定义的模板中返回具有匹配值的结果，即course_area、course_title 和course_description。

升级typeahead 会导致此功能不起作用 - 没有错误，只是不起作用。

这里有升级 typeahead 的官方指南：

Migrating to typeahead.js v0.10.0

还有一个类似的问题：

Migrating to Typeahead 0.10+ with Hogan

然而，我的数据是预取数据，如上所示，该函数需要从 JSON 文件中返回三个“键”的值。

据我所知，官方typeahead prefetch example 没有考虑到这种情况（其中源不仅仅是一个列表，而是由key:value 对组成）。

如何让原来的功能再次发挥作用？

Answer 1

这是您对 Hogan 和 Typeahead 的工作升级的小提琴： http://jsfiddle.net/5dpo4r4a/41/

要使您的代码正常工作，您需要使用 Typeahead 的新语法。 第一个参数是配置行为的选项哈希，第二个是建议引擎配置。您还需要声明建议引擎并对其进行初始化。

var dataSource = new Bloodhound({
  datumTokenizer: function(d) { 
    return Bloodhound.tokenizers.whitespace(d.tokens.join(' ')); 
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '/static/courses.json'
});

dataSource.initialize();

function searchReadyFunction() {
  $('.course_lookup .typeahead').typeahead({
  },{
    name: 'courses',
    valueKey: 'course_title',
    template: suggestion: compiled_template.render.bind(compiled_template),
    source: dataSource.ttAdapter()
  }).on('typeahead:selected', function(event, selection) {
    var course_name = selection.course_title.toLowerCase();
    // ...
  });
}

如果您需要更多信息，请告诉我。