Verwenden von Typeahead mit Google Custom Search Engine

Question

Ich versuche, Twitter Typeahead + Bloodhound mit Google CSE arbeiten zu lassen.

Bisher habe ich es geschafft, die Ergebnisse zurück zu bekommen, aber ich bin nicht in der Lage, den DatumTokenizer auszuarbeiten.

var results = new Bloodhound({ 
    datumTokenizer: function(data) { 
    return Bloodhound.tokenizers.whitespace(d.value) 
    }, 
    queryTokenizer: Bloodhound.tokenizers.obj.whitespace, 
    remote: { 
    url: "http://clients1.google.com/complete/search?client=partner&hl=en&sugexp=gsnos%2Cn%3D13&gs_rn=25&gs_ri=partner&partnerid=004914516364918182382%3Ayfqw09r4qvu&types=t&ds=cse&cp=3&gs_id=15&q=%QUERY&callback=showResults&duffCallback=?", 
    ajax: $.ajax({type:'GET',dataType:'jsonp',jsonp:'duffCallback'}), 
    filter: showResults 
    } 
}); 

Siehe Geige: http://jsfiddle.net/thugsb/3KAjh/

Sie werden sehen, dass ich die Ergebnisse von showresults zurückgegeben haben wird() als Array. Der Aufruf von showResults() aus filter: scheint jedoch nichts zu tun, da das Entfernen dieser Zeile keine Auswirkungen hat. Ich bin mir also nicht sicher, was passiert.

Beachten Sie die duffCallback ist, was ich aus dem Lesen von this question gemacht habe. Wenn es einen besseren Weg gibt, diese Arbeit zu machen, bin ich ganz Ohr!

Answer 1

Erstens war der von Ihnen verwendete Daten-Tokenizer nicht ganz richtig. Sie müssen es ändern:

datumTokenizer: function(data) { 
return Bloodhound.tokenizers.whitespace(data.value) 
} 

Hinweis, wie die „Leerzeichen“ -Funktion jetzt verweist auf den „Daten“ Eingangsparameter anstelle von „d“, die Sie verwendet haben.

Was aa Lösung für Ihr Problem finden Sie es, hier zu arbeiten (zum Beispiel versuchen, für "Leichtathletik" gesucht):

http://jsfiddle.net/Fresh/FYavC/

Das Hauptproblem mit Ihrem Code in Ihrer Remote-URL war (und das hatte mich auch verwirrt!). Die folgenden Abfragezeichenfolgeparameter sind:

...&callback=showResults&duffCallback=? 

"duffCallback =?" ist nicht erforderlich, da die Angabe "datatype:'jsonp'" im Ajax-Objekt automatisch die Rückrufdetails (d. h. "? Callback =?") hinzufügt, die von der jsonp-Anfrage verwendet werden. Auch der "callback = showResults" ist nicht erforderlich, da die Filtermethode implizit vom Bloodhound-Framework aufgerufen wird, wenn eine erfolgreiche jsonp-Anfrage erfolgt.

Ich stimme zu, dass es nicht offensichtlich ist, wie Remote-Aufrufe vorgenommen werden sollten, wenn Typeahead.js verwendet wird. Ein Beispiel für einen Remote-Aufruf, bei dem das Ajax-Objekt angegeben wurde und einige Dokumentationen auf der Website von Typeahead.js nützlich wären!