Super basic twitter-typehead page not working

Question

I'm trying my first page working with "Multiple Sections with Headers", but I'm having difficulty figuring this out.

JS BIN here: http://jsbin.com/degu/5/edit?html,css,js,output

JSON files are stored on the local server, containing default data from twitter-typehead site.

Updated JS BIN file: http://jsbin.com/babe/1/edit?html,js,output

Answer 1

Using JS Bin, I've re-created the "Dead simple" example found in the typeahead.js examples:

http://jsbin.com/levo/1

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.