Strange behavior from typeahead.js

Question

I have set up typeahead.js version 0.11.1 to pull cities from the geobytes API. Here is a codepen that does just 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 bizarre behavior I'm seeing is that when I start typing Seattle, when I get to "Seat" it's only listing two results, "Seaton, IL" and "Seatonville, IL". I know there are a lot more results being returned by the API, including "Seattle, WA." Also, if you start searching for "Everett" all results drop off at "Everet" and stay invisible until you get to "Everett," - at which point it shows "Everett, MA" and "Everett, PA" but not "Everett, WA".

The documentation for options and such pertaining to version 0.11.1 is pretty terrible over at https://github.com/twitter/typeahead.js - I would really appreciate some insight on how to use this and not have it butcher which results it shows.

Answer 1

I've meet the same situation that some items was missing. What I have done was set the typeahead option limit to 10. And it works for me.