Typeahead.js – 显示更多结果
我正在使用typeahead.js，一切都适合我，除了一件事：
我在建议下拉列表中只显示了5个条目，但是如果有更多结果，我想向用户显示，结果更多（但不是结果本身，只是信息，有更多结果）所以他继续打字。
- 我不想要滚动条
- 我不想显示其他结果
- 只是一个信息，有更多的结果
请看附上的屏幕。
您可以使用只拉出长度的filter。 在这个例子中，只显示了20个结果，但我希望人们知道是否有更多的结果没有显示。 请将结果放在页脚中。
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; } } }); 我正在寻找完全相同的东西并认为，这就是你所需要的（见2014年2月4日jharding的评论）： https ： //github.com/twitter/typeahead.js/issues/642#issuecomment-34025203
链接中的示例也适用于footer模板，如下所示。
您可以从Bloodhound的filterfunction（您可以访问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 } // ...
这个问题实际上可能来自第596行的猎犬
Typeahead.js有一个页脚模板。 此状态的文档：
页脚 – 在数据集的底部呈现。 可以是HTML字符串或预编译模板。 如果它是预编译模板，则传入的上下文将包含query和isEmpty。
因此，这不允许您将建议对象作为上下文发送，您可以将其用于报告搜索计数（即示例中的“23结果”消息）。 它只使用查询和isEmpty例如
footer: Handlebars.compile("Searched for '{{query}}'")
可以在此处找到使用Handlebars模板引擎的typeahead.js示例：
我正在寻找同样的事情，并遇到了你的问题。 我终于想出来了，所以希望这会有所帮助。 对于上下文，这是一个Backbone / Marionette应用程序，所以我的解决方案可能有点特定于它的设置方式。 结果计数显示在jQuery#typeahead(options, [*datasets])定义的header模板中，该模板在我的输入元素上调用（用户在其搜索查询中键入）。
在函数source发生的new Bloodhound的初始化中，我将结果计数设置在filter选项中。 我将它保存到ItemView上的变量中。 我通过在开始时将它保存到变量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; } } }) }
在typeahead调用中调用此函数source ：
$('.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))
希望这可以帮助！
这是一个古老的问题，但我花了很多时间才弄清楚这样的简单事情。 这是我的尝试
启动全局变量
var totalSearchResults;
然后添加filter并更新全局变量。
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'), });
init typhead
$('#demo-input').typeahead({ hint: true, highlight: true, minLength: 1, limit: 6, }, { templates: { suggestion: suggestion_template, footer: footer_template, } });
在页脚模板中显示结果
var footer_template = function (context) { return ''; };