如何将 typeahead 与预取、hogan 模板和多键 JSON 文件一起使用？

Question

我在这些版本状态下实现了 hogan.js alongside 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 值和 return 定义模板中具有匹配值的结果，即 course_area、course_title 和 course_description。

升级 typeahead 导致此功能无法使用 - 没有错误，只是无法使用。

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

Migrating to typeahead.js v0.10.0

还有一个类似的问题：

Migrating to Typeahead 0.10+ with Hogan

然而我的数据是预取数据，并且，如上所示，该函数需要return JSON 文件中的三个'keys' 的值。

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

如何让原来的功能再次运行？

Answer 1

这是您的 fiddle 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();
    // ...
  });
}

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

如何将 typeahead 与预取、hogan 模板和多键 JSON 文件一起使用？

How to use typeahead with prefetch, hogan templating and multi key JSON file?

typeahead.js

hogan.js