Using JS Bin, I've re-created the "Dead simple" example found in the typeahead.js examples:
Note that there are quite a few other examples of Typeahead.js on this site which makes use of jsfiddle.net, which I personally prefer to JS Bin.
The source as you know is:
// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ num: 'one' },
{ num: 'two' },
{ num: 'three' },
{ num: 'four' },
{ num: 'five' },
{ num: 'six' },
{ num: 'seven' },
{ num: 'eight' },
{ num: 'nine' },
{ num: 'ten' }
]
});
// initialize the bloodhound suggestion engine
numbers.initialize();
// instantiate the typeahead UI
$('.typeahead').typeahead(null, {
displayKey: 'num',
source: numbers.ttAdapter()
});
To get the "Multiple Sections with Headers" example working you'll need to develop locally, else you'd need to use a remote source to enable JS Bin to access your locally hosted json files.
Note that the reason why your example (i.e. http://jsbin.com/babe/1/edit ) wasn't working was:
- You were missing a reference to jQuery 1.9+
- You forgot to add opening body and div tags
Also I recommend that you include dependencies to libraries using a "script" element instead of placing the entire library into the JS Bin "Javascript" section; reserve the "Javascript" section for code which makes use of the referenced libraries.