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

然而，我的数据是预取数据，并且，如上所示，该函数需要返回三个键的值＆＃39;来自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();
    // ...
  });
}

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

如何使用preaetch，hogan模板和多键JSON文件的typeahead？

1 个答案: