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：

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

source – 建议的支持数据源。预计是一个带有签名的函数 (query, cb)。预计该函数将计算用于查询的建议集（即 JavaScript 对象数组），然后使用所述集调用 cb。 cb 可以同步或异步调用。可以在此处使用 Bloodhound 建议引擎，要了解如何使用，请参阅 Bloodhound 集成。必填。

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

displayKey – 对于给定的建议对象，确定它的字符串表示形式。这将在选择建议后设置输入控件的值时使用。可以是键字符串或将建议对象转换为字符串的函数。默认为值。

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

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

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

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

suggestion – 用于呈现单个建议。如果设置，这必须是一个预编译的模板。关联的建议对象将用作上下文。默认为包含在 p 标签中的 displayKey 的值，即

{{值}}

。

所以必须做的是：

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'),
  footer : [
    '<div class="more-results">',
      '<a href="#">More Results</a>',
    '<div>'
  ].join('\n'),
  suggestion: Handlebars.compile('<p>{{name}}</p>')
}

希望这对某人有帮助:)