Question

我尝试使用Typeahead.js设置自定义模板

我的代码是：

var countries = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.value);
    },queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: {
        url: 'http://www.domain.com/json.php?action=countries&q=%QUERY'
    }
});

countries.initialize();

$('.lang').typeahead(null, {
    name: 'countries',
    source: countries.ttAdapter(),
    template: [
        '<p class="lang-id">{{lang_id}}</p>',
        '<p class="value">{{value}}</p>'
    ].join(''),
    engine: Hogan
});

它工作正常，但模板设置被忽略 - 我仍然得到默认下拉列表。我做错了什么？

编辑：我也尝试过：

$('input').typeahead(null, {
  name: 'countries',
  displayKey: 'value',
  source: countries.ttAdapter(),
  templates: {
     empty: [
      '<div class="empty-message">',
      'no results found',
      '</div>'
    ].join('\n'),
    suggestion: '<p><strong>{{value}}</strong> – {{id}}</p>'
  },
  engine: Hogan
});

会抛出错误：

Property 'suggestion' of object #<Object> is not a function

Answer 1

查看the documentation，您可以看到该名称为templates而非template - 就像您在第二个示例中所示。你遇到的问题是suggestion需要是一个函数，而不是一个字符串。在自定义模板的底部示例中，您可以看到它们使用Handlebars.compile返回一个函数，该函数接受包含数据的单个参数以使用 - 来呈现模板 - 并返回生成的HTML的字符串。如果你不想使用Handlebars，你可以做类似的事情（请注意，为了简单起见，我不会逃避我的例子中的数据。要获得正确的解决方案，你应该逃避data.value和{{1}确保不引入XSS漏洞）：

data.id

Typeahead.js - 忽略模板设置

1 个答案: