我正在使用typeahead.js,一切都运行良好,唯一的问题是:
我在建议下拉列表中仅显示5个条目,但如果有更多结果,我希望向用户显示有更多结果的信息(而不是结果本身),以便他继续输入。
- 我不想要滚动条
- 我不想显示其他结果
- 只需显示有更多结果的信息
请参见附加的屏幕截图。
我正在使用typeahead.js,一切都运行良好,唯一的问题是:
我在建议下拉列表中仅显示5个条目,但如果有更多结果,我希望向用户显示有更多结果的信息(而不是结果本身),以便他继续输入。
请参见附加的屏幕截图。
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;
}
}
});
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();
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
}
// ...
这是一个老问题,但我花了很多时间才弄清楚这样简单的事情。以下是我的尝试:
初始化全局变量。
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>';
};
我正在寻找相同的问题,并且看到了你的提问。我最终为自己找到了答案,希望这可以帮助你。为了背景说明,这是一个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')
}
});
$('.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))
Typeahead.js有一个页脚模板。文档中说明:
footer - 渲染在数据集底部。可以是HTML字符串或预编译的模板。如果是预编译的模板,则传入的上下文将包含查询和isEmpty。
因此,这将不会允许您将建议对象作为上下文发送,您可以将其用于报告搜索计数(即在示例中的“23个结果”消息)。它仅使用查询和isEmpty,例如:
footer: Handlebars.compile("<b>Searched for '{{query}}'</b>")
这里有一个使用Handlebars模板引擎的typeahead.js示例: