我正在使用typeahead.js，一切都运行良好，唯一的问题是：
我在建议下拉列表中仅显示5个条目，但如果有更多结果，我希望向用户显示有更多结果的信息（而不是结果本身），以便他继续输入。
- 我不想要滚动条
- 我不想显示其他结果
- 只需显示有更多结果的信息
请参见附加的屏幕截图。
Typeahead.js - 显示更多的搜索结果
11
- bernhardh
6
请参考此答案以了解如何增加显示的建议数量。 - Ben Smith
1但这不是我想要的。我不想增加限制，我想显示还有更多的结果。 - bernhardh
所以我尝试让它更清晰，我不想增加限制或显示更多结果。 - bernhardh
2@BenSmith 这不是重复的。那个答案是关于增加显示建议的最大数量。OP的问题是如何显示有多少额外的结果。 - Uyghur Lives Matter
感谢您重新打开并抱歉我的问题的第一个版本可能不够清晰。我的问题是，我在自动完成中使用了3个不同的数据源，因此我无法显示滚动条。 - bernhardh
@BenSmith，是的，“23个结果”应该可点击 - 应该有一种方法来指定它的链接。 - Victor Sergienko
6个回答
3
You can use a filter that just pulls out the length. In this example, only 20 results would be shown but I wanted people to know if there were more results not being displayed. See this for putting the results in a footer.
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;
}
}
});- Dan G
3
我正在寻找完全相同的内容，我认为你需要的内容是这样的（请参阅2014年2月4日jharding的评论）：
https://github.com/twitter/typeahead.js/issues/642#issuecomment-34025203
链接中的示例也适用于如下的底部模板。
您可以在Bloodhound的filter函数中保存结果数量（在那里您可以访问AJAX请求的结果），并将其存储在DOM中，例如：
现在，从上面的链接中可以得出关键点： 您可以通过以下方式包装Handlebars模板（实际上是一个函数）并扩展/替换传递给模板的Handlebars上下文：
您可以在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
}
// ...
- Simon
0
这是一个老问题，但我花了很多时间才弄清楚这样简单的事情。以下是我的尝试：
初始化全局变量。
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'),
});
初始化 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 '<div class="suggestion-footer"><a href="/search?q=' + context.query + '">View All ('+window.totalSearchResults+') Results </a></div>';
};
- Nomi
0
我正在寻找相同的问题，并且看到了你的提问。我最终为自己找到了答案，希望这可以帮助你。为了背景说明，这是一个Backbone/Marionette应用程序，所以我的解决方案可能有点具体化。结果计数显示在header模板中定义的jQuery#typeahead(options, [*datasets])中，该模板被调用在我的输入元素上（用户在其中输入他们的搜索查询）。
在source函数中发生的new Bloodhound初始化中，在一个过滤选项中设置结果计数。我将其保存到我的ItemView变量中。我通过在一开始将其保存到变量self中来对其进行了某种程度上的处理（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))
希望这能有所帮助！
- ahimmelstoss
0
Typeahead.js有一个页脚模板。文档中说明：
footer - 渲染在数据集底部。可以是HTML字符串或预编译的模板。如果是预编译的模板，则传入的上下文将包含查询和isEmpty。
因此，这将不会允许您将建议对象作为上下文发送，您可以将其用于报告搜索计数（即在示例中的“23个结果”消息）。它仅使用查询和isEmpty，例如：
footer: Handlebars.compile("<b>Searched for '{{query}}'</b>")
这里有一个使用Handlebars模板引擎的typeahead.js示例：
- Ben Smith
2
谢谢您的回复，我知道有页脚模板并且已经尝试过了，但由于它没有关于结果的信息，所以并不能解决我的问题。 - bernhardh
是的，我只是在说Typeahead不允许你做你想做的事情，因为它只传递查询上下文。希望你能找到解决这个问题的方法。 - Ben Smith
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接