Typeahead 在建议末尾添加自定义行

Posted 2023-05-07

【中文标题】Typeahead 在建议末尾添加自定义行

【英文标题】：Typeahead add a custom line to end of suggestions

【发布时间】：2014-06-26 21:29:54

【问题描述】：

是否有可能在所有建议的末尾添加自定义行？我想添加一个“显示更多建议”，它是指向另一个页面的链接。

$(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 上的基本示例。我看到错误消息在“模板”中的“空”处触发，它有一个选项可以在列表完成或类似的情况下触发。

非常感谢您的帮助。

【问题讨论】：

请添加您自己的答案作为答案并接受。

是的，它有帮助，谢谢 :) 我要使用'footer' ????

我建议你编辑你的帖子，从问题中删除你的答案，然后回答你自己的问题，这样它就不会被标记为未回答。

【参考方案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>')

希望这对某人有帮助:)

【讨论】：

我知道这太旧了，但是你是如何用 jquery 选择那个 div 的？ $('.empty-message').click(function() ... );不工作

因为它是动态添加的（dom 已更新），您必须根据您的 jquery 版本使用 on/live 方法将事件放在主体上，以便在 dom 更新时绑定事件