Twitter typeahead.jsと複数の一致のためのjsonオブジェクト

Question

私はいくつかのコースのパラメータに基づいて大学のコースを見つけることができるはずのプログラムを書いています。私は1360個のオブジェクトを含む巨大なjsonオブジェクトを持っていて、各オブジェクトは約20-30個のパラメータを持っています。私は約3-5人にしか関心がありません。

私がしたいことは、番号、名前、教師の名前、または各コースの説明にあるキーワードのセットに基づいてコースを見つけることです。

とにかく。私はtwitters typeahead.jsを使いこなしてみましたが、理解できる限り、文字列を解析する必要があります。私はこれを行うことができる簡単な方法（または別のJavaScriptモジュール）はありませんか？

var courses = [ 
    { "number": "<5 digits>", 
     "name": "<course name>", 
     "teacher": "<teacher name>", 
     "keywords": "<string of keywords>" } 
    { ... } 
    { ... } 
    { ... } 
    and so forth.. 
]; 

そしてサイズの1360個のオブジェクトが述べたように、それは次のようになります。

私の現在のオブジェクトです。

は、しかし、私が言及したパラメータ（番号、名前、教員名、キーワード）で検索できるようにすると可能な限り最高を得る：

私はこのような出力を取得したいですテキストフィールドに入力されたものと一致します。

これを達成する方法を知っている人はいますか？

Answer 1

これは非常に簡単ですが、ではなく、とtypeahead.jsです。それは231未公開の問題（入力時に、いくつかの非常に深刻な）を持っており、年のに更新されていません。

代わりにbootstrap3-typeaheadを使用してください。それは維持され、最新です。さらに読む前に、ドキュメントを見てください。あなたはJSONを提供していないので、私は下の例で別のJSONを使用しています。ここ

あなたがしなければならないのはmatcherメソッドを定義することで、と比較している大文字と小文字を区別しない、非常に単純なJSON項目内のすべての属性：

matcher: function(item) { 
    for (var attr in item) { 
    if (~item[attr].toString().toLowerCase().indexOf(this.query.toLowerCase())) return true 
    } 
    return false 
} 

あなたはどのattrsに/テキストを上書きすることができます（純粋な例）displayTextを使用してドロップダウンに表示される必要があります。

displayText: function(item) { 
    return item.id + ' ' + item.label + ' ' + item.value 
} 

あなたは完全にアイテムのレンダリングを無効にしたい場合は、複雑なHTMLとして、0の組み合わせを使用とhighlighter各表示文字列文字列化JSONを含む：

afterSelect: function(item) { 
    this.$element[0].value = item.value 
} 

：表示文字列を文字列化された場合

displayText: function(item) { 
    return JSON.stringify(item) 
}, 
highlighter: function(item) { 
    item = JSON.parse(item) 
    return '<span><h4>'+item.value + '</h4>' + item.id + ' ' + item.label +'</span>' 
} 

、<input>は、選択された値であるべき値（複数の）属性を使用して更新されなければなりません

完全な例：

$('#example').typeahead({ 
    source: json, 
    matcher: function(item) { 
    for (var attr in item) { 
     if (~item[attr].toString().toLowerCase().indexOf(this.query.toLowerCase())) return true 
    } 
    return false 
    }, 
    displayText: function(item) { 
    return JSON.stringify(item) 
    }, 
    highlighter: function(item) { 
    item = JSON.parse(item) 
    return '<span><h4>'+item.value + '</h4>' + item.id + ' ' + item.label +'</span>' 
    }, 
    afterSelect: function(item) { 
    this.$element[0].value = item.value 
    } 
})     

デモ - >http://jsfiddle.net/vhme3td1/