26

Please see example below.

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)

 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>'
    }
});
4

3 回答 3

31

Typeahead 0.10.3 添加了“对对象标记器的支持以进行多属性标记化”。

所以，你的例子变成

var posts = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title', 'desc'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
});

但是，我认为这不适用于嵌套在内部的属性，即data.category您的情况下的对象。

附带说明，如果使用的是预取数据，请务必先清除本地存储，否则新的分词器不会生效（因为datumTokenizer添加到搜索索引时使用，并且如果数据已经存在于 中localStorage，则搜索索引不会更新）。我被困了一段时间！

于 2014-09-29T08:40:23.120 回答
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);
于 2014-04-04T14:04:35.030 回答
7

我在这里实现了一个解决方案：

http://jsfiddle.net/Fresh/4nnnG/

由于您拥有本地数据源，因此您需要创建单独的数据集以使您能够匹配多个数据属性。例如

$('#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()
});
于 2014-02-18T22:58:39.153 回答