Basic typeahead implementation

Question

I am trying to implement the countries typeahead example, but am having difficulty getting it to load. What am I doing wrong?

JSFiddle here: http://jsfiddle.net/EXgq9/

HTML

<input type="text" class="typeahead" placeholder="Enter your location">

JS

$(document).ready(function() {
  $('.typeahead').typeahead({
    name: 'countries',
    prefetch: 'http://twitter.github.io/typeahead.js/data/countries.json',
    limit: 10
  });
}

Answer 1

This should be the nearly working fiddle: http://jsfiddle.net/GDqme/

The problem with your code is you are attempting to use:

prefetch: 'http://twitter.github.io/typeahead.js/data/countries.json'

And it doesn't work since it would be cross site request and Twitter doesn't allow that.

What you should do is download that JSON file and set it up locally:

$('.typeahead').typeahead({
    name: 'countries',
    prefetch: '/data/countries.json',
    limit: 10
});

Anyway, remember that the console (from Firebug / Chrome dev tools) is your friend.