请参阅下面的示例。
JSFiddle:http://jsfiddle.net/R7UvH/2/
如何让typeahead.js(0.10.1)在多个属性值中搜索匹配项?理想情况下,整个data
(data.title
,data.desc
和所有data.category[i].name
)
datumTokenizer: function(data) {
// **search in other property values; e.g. data.title & data.desc etc..**
return Bloodhound.tokenizers.whitespace(data.title);
},
整个例子:
var data = [{
title: "some title here",
desc: "some option here",
category: [{
name: "category 1",
}, {
name: "categoy 2",
}]
},
{
title: "some title here",
desc: "some option here",
category: [{
name: "category 1",
}, {
name: "categoy 2",
}]
}];
var posts = new Bloodhound({
datumTokenizer: function(data) {
// **search in other property values; e.g. data.title & data.desc etc..**
return Bloodhound.tokenizers.whitespace(data.title);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
posts.initialize();
$('#search-input').typeahead({
highlight: true
}, {
name: 'Pages',
displayKey: 'title',
source: posts.ttAdapter(),
templates: {
header: '<h3>Pages</h3>'
}
});
答案 0 :(得分:28)
Typeahead 0.10.3 added "support to object tokenizers for multiple property tokenization."
所以,你的例子变成了
var posts = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title', 'desc'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
但是,我认为这不适用于嵌套在内部的属性,即你的data.category
对象。
作为旁注,如果您使用的是预取数据,请务必先清除本地存储,否则新的标记生成器将不会生效(因为添加到搜索索引时会使用datumTokenizer
,并且如果localStorage
中已存在数据,则不会更新搜索索引)。我被困在这一段时间了!
答案 1 :(得分:14)
return Bloodhound.tokenizers.whitespace(data.title)
返回一个字符串数组。
所以,不要返回那个值:保存它(和你想要的其他值),然后连接它们并返回那个值......
x = Bloodhound.tokenizers.whitespace(data.title);
y = Bloodhound.tokenizers.whitespace(data.desc);
z = Bloodhound.tokenizers.whitespace(data.category[i].name);
return x.concat(y).concat(z);
答案 2 :(得分:6)
我在这里实施了一个解决方案:
http://jsfiddle.net/Fresh/4nnnG/
由于您有本地数据源,因此需要创建单个数据集以使您能够匹配多个数据属性。 e.g。
$('#search-input').typeahead({
highlight: true
}, {
name: 'titles',
displayKey: 'title',
source: titles.ttAdapter()
}, {
name: 'descs',
displayKey: 'desc',
source: descs.ttAdapter()
}, {
name: 'cats',
displayKey: 'name',
source: cats.ttAdapter()
});