Typeahead.js - 显示有更多结果

Question

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

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

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

请看附件。

Answer 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;
            }
        }
    });

Answer 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
}
// ...

Answer 3

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

Answer 4

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

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

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

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

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

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

Answer 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))

希望这会有所帮助！

Answer 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>';
};