web-dev-qa-db-ja.com

Typeahead.js-複数のプロパティ値での検索

以下の例をご覧ください。

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>'
    }
});
javascriptjquerytypeaheadtypeahead.jsbloodhound
26
Iladarsda

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に存在するため、検索インデックスは更新されません）。しばらくこだわった！

29
Neelabh

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);
14
Timothy Aaron

私はここに解決策を実装しました：

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()
});
6
Ben Smith