Typeahead.js - 显示有更多结果

Posted 2023-05-07

【中文标题】Typeahead.js - 显示有更多结果

【英文标题】：Typeahead.js - Show that there are more results

【发布时间】：2014-10-15 17:20:54

【问题描述】：

我正在使用 typeahead.js，对我来说一切正常，除了一件事：

我在建议下拉列表中仅显示 5 个条目，但如果有更多结果，我想向用户显示还有更多结果（但不是结果本身，只是信息，有更多结果）让他继续打字。

我不想要滚动条 我不想显示其他结果 只是一个信息，还有更多结果

请看附件。

【问题讨论】：

请参阅this 回答，了解如何增加显示的建议数量。

但这不是我想要的。我不想增加限制，我想显示有更多的结果。

所以我试着说得更清楚一点，我不想增加限制或显示更多结果。

@BenSmith 这不是重复的。 answer 用于增加显示的建议的最大数量。 OP 的问题是关于如何显示计数还有多少附加结果。

感谢您重新打开它，如果我的问题的第一个版本可能不清楚，我们很抱歉。我的问题是，我在自动完成中使用了 3 个不同的数据源，所以我无法显示滚动条。

【参考方案1】：

您可以使用仅拉出长度的过滤器。在此示例中，将仅显示 20 个结果，但我希望人们知道是否还有更多结果未显示。 请参阅this 将结果放在页脚中。

    var addresses = new Bloodhound(
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('number'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 20,
        remote: 
            url: 'url?q=%QUERY',
            filter: function(list) 
                $('#search-total').html(list.length);
                return list;
            
        
    );

【参考方案2】：

我正在寻找完全相同的东西并认为，这就是您需要的（请参阅 jharding 2014 年 2 月 4 日的评论）： https://github.com/twitter/typeahead.js/issues/642#issuecomment-34025203

链接中的示例也适用于footer 模板，如下所示。

您可以通过 Bloodhound 的 filter 函数（您可以访问 AJAX 请求的结果）将结果数量保存在 DOM 中，如下所示：

var bloodHound = new Bloodhound(
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 5,
  remote: 
      url: url+'%QUERY',
      filter: function (srcs) 
        // store field JSON response to the DOM
        $('#num-results').html(srcs.numResults);
        ...
      
    
);
bloodHound.initialize();

现在是上面链接的关键点： 您可以包装 Handlebars 模板（实际上是一个函数）并以这种方式扩展/替换传递给模板的 Handlebars 上下文：

var footerTmpl = Handlebars.compile('numResults results for query');

var footer = function(context) 
  var numResults = $('#num-results').html();
  var data =  'numResults': numResults, 'query': context.query ;
  return footerTmpl(data);


// ...
templates: 
  footer: footer

// ...

【参考方案3】：

问题实际上可能来自bloodhound在线596

【参考方案4】：

Typeahead.js 有一个页脚模板。文档说明：

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

因此，这将不允许您发送建议对象作为上下文，您可以将其用于报告搜索计数（即示例中的“23 个结果”消息）。它只使用查询和 isEmpty 例如

footer: Handlebars.compile("<b>Searched for 'query'</b>")

可以在此处找到使用 Handlebars 模板引擎的 typeahead.js 示例：

http://jsfiddle.net/Fresh/d7jdp03d/

【讨论】：

谢谢你，我知道有一个页脚模板，我已经试过了，但由于它没有关于结果的信息，它并不能解决我的问题。

是的，我只是说 Typeahead 不允许你做你想做的事，因为它只通过查询上下文。希望您能找到解决此问题的方法。

【参考方案5】：

我正在寻找同样的东西并遇到了你的问题。我终于想通了，所以希望这会有所帮助。就上下文而言，这是一个 Backbone/Marionette 应用程序，所以我的解决方案可能有点特定于它的设置方式。结果计数显示在定义为jQuery#typeahead(options, [*datasets]) 的header 模板中，该模板在我的输入元素（用户在其搜索查询中键入）上调用。

在函数source 中发生的new Bloodhound 的初始化中，我在过滤器选项中设置了结果计数。我将它保存到我的 ItemView 上的一个变量中。我在开始时通过将self 保存到变量self 来破解this（Marionette.ItemView）。请务必return results。

source: function () 
  var self = this;
   return new Bloodhound(
   datumTokenizer: Bloodhound.tokenizers.whitespace,
   queryTokenizer: Bloodhound.tokenizers.whitespace,
   remote: 
    url: 'my/search/endpoint',
    filter: function (results) 
      self.resultsCount = results.length;
      return results;
    
  
 )

这个函数 source 在 typeahead 调用中被调用：

$('.typeahead').typeahead(
  minLength: 3,
  highlight: true
,

  name: 'my-dataset',
  source: this.source(),
  templates: 
    header: require('my/header_template'),
    empty: require('my/empty_template'),
    suggestion: require('my/suggestion_template')
  
);

这发生在 Marionette.ItemView 的 onRender 中，然后我可以将 this.resultsCount 的值插入到标题模板中的 DOM 元素中。您可以点击typeahead:render 事件。在这里，我基本上检查要存储计数的 DOM 元素是否存在，然后显示总计数减去 tt-menu 中显示的项目数（我只计算页面上有多少 tt-suggestion）。我隐藏了“更多”链接，直到有更多内容可以通过点击显示。

$('.search-input').on('typeahead:render', function (ev, suggestions, flag, dataset) 
  if ($('.num-results').length) 
    var moreCount = this.resultsCount - $('.tt-suggestion').length;

    $('.num-results').text(moreCount);
    if (moreCount > 0) 
      $('.more').removeClass('hidden');
     else 
      $('.more').addClass('hidden');
    
  
.bind(this))

希望这会有所帮助！

【参考方案6】：

这是一个老问题，但我花了很多时间才弄清楚这样简单的事情。这是我的尝试

初始化一个全局变量

var totalSearchResults;

然后添加过滤器并更新全局变量。

   var engine = new Bloodhound(
    remote: 
        url: '/search?q=%QUERY%',
        wildcard: '%QUERY%',
        filter: function (list) 
            window.totalSearchResults = list.length;
            return list;
        
    ,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
);

初始化输入头

$('#demo-input').typeahead(
    hint: true,
    highlight: true,
    minLength: 1,
    limit: 6,
, 
    templates: 
        suggestion: suggestion_template,
        footer: footer_template,
    
);

在这样的页脚模板中显示结果

   var footer_template = function (context) 
    return '<div class="suggestion-footer"><a href="/search?q=' + context.query + '">View All ('+window.totalSearchResults+') Results </a></div>';
;