2014-02-18 92 views
19

请参阅下面的示例。Typeahead.js - 在多个属性值中搜索

的jsfiddle:http://jsfiddle.net/R7UvH/2/

如何使在不止一个属性值匹配typeahead.js(0.10.1)搜索?理想的情况下,内整datadata.titledata.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>' 
    } 
}); 

回答

5

我实现了这里的解决方案:

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() 
}); 
+1

(^ _ *)Stay @Fresh – zee

+0

@NullSoulException:D –

+0

@Fresh感谢您抽出时间,它比我最初提出的稍微复杂。我正在使用多个源文件(这些源文件被分类为头文件 - 与每个typeahead.js多源文件示例http://twitter.github.io/typeahead.js/examples/完全相同)。你能指点我一个过滤器用法的例子吗?请注意,我想保留标题(媒体,页面,帖子)的分类。谢谢 – Iladarsda

13

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); 
22

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

在@timothy解决方案上工作了好几天,但它对我没有用。这个解决方案的工作原理更加优雅。 –

+1

伟大的解决方案,谢谢。注意,你可以用'prefetch:{cache:false,...}'来防止预取缓存' –

+0

这个方法可行,但是提醒:**你必须按照它们出现的顺序在数据模式中指定属性;否则,它将无法工作。我认为这是一个前面的bug,因为它对用户来说是惊人的。 – toddmo