Typeahead添加自定义行以结束建议

Question

是否有可能在所有建议结束时添加自定义行？我想添加一个"显示更多建议",这是一个链接到另一个页面.

$(function(){

var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url : '/json/temp/countries.json',
    filter: function(list) {
      return $.map(list, function(country) { return { name: country }; });
    }
  },
});

countries.initialize();

$('.component-search-button .ui-input input').typeahead(null, 
{
   highlight: true,
   name: 'countries',
   displayKey: 'name',
   source: countries.ttAdapter(),
   templates: {
     empty: [
       '<div class="empty-message">',
          '<i>Unfortunatelly we coud not find items that match the current query. Please    try again.</i>',
       '</div>'
     ].join('\n'),
     suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>')
   }
 }
);


});

它遵循Git的基本示例.我看到错误消息在"模板"中的"空"处触发,它有一个选项,它可以触发列表完成或类似的东西.

非常感谢你的帮助.

Answer 1

好吧，我找到了自己的答案。来自Typeahead API：

\n\n

\n

可以使用以下选项配置数据集。

\n\n

source \xe2\x80\x93 建议的支持数据源。预期是具有签名 (query, cb) 的函数。预计该函数将计算查询的建议集（即 JavaScript 对象数组），然后使用该集调用 cb。cb 可以同步或异步调用。此处可以使用 Bloodhound 建议引擎，要了解如何使用，请参阅 Bloodhound 集成。必需的。

\n\n

name \xe2\x80\x93 数据集的名称。这将被附加到 tt-dataset- 以形成包含 DOM 元素的类名。只能包含下划线、破折号、字母 (az) 和数字。默认为随机数。

\n\n

displayKey \xe2\x80\x93 对于给定的建议对象，确定其字符串表示形式。选择建议后设置输入控件的值时将使用此选项。可以是键字符串，也可以是将建议对象转换为字符串的函数。默认为值。

\n\n

templates \xe2\x80\x93 渲染数据集时使用的模板的哈希值。请注意，预编译模板是一个将 JavaScript 对象作为其第一个参数并返回 HTML 字符串的函数。

\n\n

空 \xe2\x80\x93 当给定查询有 0 个建议可用时呈现。可以是 HTML 字符串或预编译模板。如果它是预编译模板，则传入的上下文将包含查询。

\n\n

footer\xe2\x80\x93 在数据集的底部呈现。可以是 HTML 字符串或预编译模板。如果它是预编译模板，则传入的上下文将包含 query 和 isEmpty。

\n\n

header \xe2\x80\x93 在数据集的顶部呈现。可以是 HTML 字符串或预编译模板。如果它是预编译模板，则传入的上下文将包含 query 和 isEmpty。

\n\n

suggest \xe2\x80\x93 用于呈现单个建议。如果设置，这必须是预编译模板。关联的建议对象将充当上下文。默认为 ap 标签中包含的 displayKey 的值，即

{{价值}}

。

\n

\n\n

所以我们必须做的是：

\n\n

templates: {\n empty: [\n    \'<div class="empty-message">\',\n      \'<i>Unfortunatelly we coud not find items that match the current query. Please try again.</i>\',\n    \'</div>\'\n  ].join(\'\\n\'),\n  footer : [\n    \'<div class="more-results">\',\n      \'<a href="#">More Results</a>\',\n    \'<div>\'\n  ].join(\'\\n\'),\n  suggestion: Handlebars.compile(\'<p>{{name}}</p>\')\n}\n

\n\n

希望这对某人有帮助:)

\n