javascript Typeahead.js - 在多个属性值中搜索
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21850707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typeahead.js - Search in multiple property values
提问by Iladarsda
Please see example below.
请看下面的例子。
JSFiddle: http://jsfiddle.net/R7UvH/2/
JSFiddle:http: //jsfiddle.net/R7UvH/2/
How do I make typeahead.js(0.10.1) search for matches in more than one property value? Ideally, within whole data
(data.title
, data.desc
and in all data.category[i].name
)
如何让typeahead.js(0.10.1) 在多个属性值中搜索匹配项?理想情况下,在整个data
( data.title
,data.desc
和 in all 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);
},
Whole example:
整个例子:
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>'
}
});
回答by Neelabh
Typeahead 0.10.3 added "support to object tokenizers for multiple property tokenization."
Typeahead 0.10.3 添加了“支持多属性标记化的对象标记器”。
So, your example becomes
所以,你的例子变成
var posts = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title', 'desc'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
However, I don't think this will work for properties nested inside, that is, the data.category
object in your case.
但是,我认为这不适用于嵌套在内部的属性,即data.category
您案例中的对象。
As a side note, if you are using prefetched data, be sure to clear the local storage first, otherwise the new tokenizer won't take effect (Because datumTokenizer
is used when adding to the search index, and if data is already present in localStorage
, then the search index will not be updated). I was stuck on this for a while!
附带说明一下,如果你使用的是预取数据,一定要先清除本地存储,否则新的tokenizer不会生效(因为datumTokenizer
添加到搜索索引时使用,如果数据已经存在localStorage
,那么搜索索引不会更新)。我被这个问题困住了一段时间!
回答by Timothy Aaron
return Bloodhound.tokenizers.whitespace(data.title)
returns an array of strings.
return Bloodhound.tokenizers.whitespace(data.title)
返回一个字符串数组。
So, instead of returning that value: save it (and your other desired values), then concatenate them and return that value...
因此,不要返回该值:保存它(以及其他所需的值),然后将它们连接起来并返回该值...
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);
回答by Ben Smith
I've implemented a solution here:
我在这里实施了一个解决方案:
http://jsfiddle.net/Fresh/4nnnG/
http://jsfiddle.net/Fresh/4nnnG/
As you have a local datasource you need to create individual datasets to enable you to match on multiple data properties. 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()
});