Strange behavior from typeahead.js

I have installed typeahead.js version 0.11.1 to pull cities from the geobytes API. Here's the code that does exactly that:

http://codepen.io/jeremeevans/pen/OVPram

var cities = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace(),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=<geobytes%20city>,%20<geobytes%20code>&filter=US&q=%QUERY",
        wildcard: "%QUERY",
        dataType: "jsonp",
        transform: function (response) {
            return response;
        }
    },
    limit: 10
});

$("#city").typeahead({
    minLength: 3,
    highlight: true,
    hint: true
}, {
    name: "US-Cities",
    source: cities
});

      

        
        
        
      

    

The quirky behavior I see is that when I start typing in Seattle, when I get to "Seat" it only lists two results: "Seaton, IL" and "Seatonville, IL". I know the API returns a lot more results, including "Seattle, WA". In addition, if you search for Everett, all results will be displayed on Everett and remain invisible until you get to Everett, at which point it shows Everett, Massachusetts and Everett, State Pennsylvania, but not Everett, WA. "

The documentation on parameters and the like, pertaining to version 0.11.1, is pretty awful at https://github.com/twitter/typeahead.js - I'd really appreciate understanding how to use this and not have a butcher whose results it shows.