Firstly the datumTokenizer you were using was not quite right. You need to change it to:
datumTokenizer: function(data) {
return Bloodhound.tokenizers.whitespace(data.value)
}
Note how the "whitespace" function is now referencing the "data" input parameter instead of "d" which you were using.
As for a a solution to your problem, see it working here (for example try searching for "athletics"):
http://jsfiddle.net/Fresh/FYavC/
The main problem with your code was in your remote URL (and this had me confused too!). The offending query string parameters are:
...&callback=showResults&duffCallback=?
"duffCallback=?" is not required as specifying "datatype:'jsonp'" in the ajax object automatically adds the callback details (i.e. "?callback=?") used by the jsonp request. Also the "callback=showResults" is not required as the filter method is implicitly called by the Bloodhound framework when a successful jsonp request is made.
I agree that it's not obvious on how remote calls should be made when using Typeahead.js. An example of a remote call where the ajax object is specified and some documentation would be useful on Typeahead.js website!