Twitter typeahead.js und ein JSON-Objekt für mehrere Übereinstimmungen

Question

Ich schreibe ein Programm, das in der Lage sein sollte, einen Universitätskurs zu finden, der auf einigen Kursparametern basiert. Ich habe ein riesiges Json-Objekt mit 1360 Objekten und jedes Objekt hat etwa 20-30 Parameter. Ich interessiere mich nur für ungefähr 3-5 von ihnen jedoch.

Ich möchte einen Kurs finden, der auf seiner Nummer, dem Namen, dem Namen des Lehrers oder einer Reihe von Schlüsselwörtern basiert, die jeder Kurs in seiner Beschreibung hat.

Wie auch immer. Ich habe versucht, mit twitters typeahead.js herumzualbern und soweit ich das verstehen kann, müssen Sie ein Array von Strings parsen, und es braucht nur 1 Array, so weit es scheint. Gibt es nicht einen einfachen Weg (oder ein anderes Javascript-Modul), dass ich das tun kann?

Mein aktuelles Objekt:

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

Und es ist, als 1360 Objekte der Größe erwähnt.

Ich möchte eine Ausgabe ähnlich wie diese erhalten:

Jedoch habe ich auf die beschriebenen Parameter suchen können soll (Nummer, Name, Lehrer Name, Schlüsselbegriffe) und bekommen die bestmögliche Übereinstimmung für was auch immer in das Textfeld eingegeben wurde.

Hat jemand eine Idee, wie man das erreicht?

Answer 1

Dies ist sehr einfach, aber nicht mit typeahead.js. Es hat 231 offene Probleme (zum Zeitpunkt der Eingabe, einige sehr ernst) und wurde nicht in einem Jahr aktualisiert.

Verwenden Sie stattdessen bootstrap3-typeahead. Es ist gepflegt und aktuell. Sehen Sie sich die Dokumentation an, bevor Sie weiterlesen. Sie stellen kein JSON bereit, deshalb verwende ich im folgenden Beispiel ein anderes JSON.

Alles, was Sie tun müssen, ist eine matcher Methode zu definieren, hier einen sehr einfachen Fall nicht empfindlich, dass mit alle Attribute in einem JSON Artikel vergleicht:

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

Sie können außer Kraft setzen, die attrs/Text, in der Dropdown-Liste angezeigt wurde mit displayText (reinem Beispiel) soll:

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

Wenn Sie die Wiedergabe des Artikels vollständig außer Kraft setzen wollen, wie komplexen HTML, verwenden eine Kombination von displayText und highlighter wobei jeder String Anzeige die Zeichenfolge JSON enthalten:

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>' 
} 

Wenn die Anzeigezeichenfolgezeichenfolge wird, kann die <input> muß mit dem Wertattribut (e) aktualisiert, dass der ausgewählte Wert sein sollte:

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

Komplettes Beispiel:

$('#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 
    } 
})     

Demo ->http://jsfiddle.net/vhme3td1/