Question

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

$(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的基本示例。我看到错误消息在＆＃34;空＆＃34;在＆＃34; templates＆＃34;中，它有一个选项，它可以在列表完成或类似的东西上触发。

非常感谢你的帮助。

Answer 1

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

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

source - 建议的支持数据源。期望是带签名的函数（query，cb）。期望该函数将计算用于查询的建议集（即，JavaScript对象的数组），然后用所述集调用cb。可以同步或异步调用cb。可以在这里使用Bloodhound建议引擎，了解如何，参见Bloodhound Integration。必需的。

name - 数据集的名称。这将附加到tt-dataset-以形成包含DOM元素的类名。只能由下划线，短划线，字母（a-z）和数字组成。默认为随机数。

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

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

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

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

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

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

{{value}}
。

所以必须做的是：

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>')
}

希望这有助于某人：）

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

1 个答案: