twitter typeahead ajax results not all shown

I am using the twitter typeahead (typeahead.js 0.11.1) plugin with an ajax call which works, but gives some strange behavior when the number of ajax results are less than the the limit (default limit is 5 which I haven’t specified in the typeahead call). Here is how I have set it up:

var limit = 6;

populate_typeahead = function() {
      hint: true,
      highlight: true,
      minLength: 1
      source: ajaxquery,

var ajaxquery = function(query, syncresults, process) {
        return $.ajax({
            url: $(this)[0].$el.closest('span.twitter-typeahead').find('input:last').data('mahiFindByPath'),
            type: 'get',
            data: {search_string: query, limit: limit},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);

The actual example that is causing me the issue, is by typing “new to” in the input box which returns the following json.options:

    'new to add to g1',
    'new to be in grp1 then remove from grp',
    'new to drag',
    'new to assign'

But the only suggestion that comes up is ‘new to add to g1’, when all 4 should show. If I continue typing ‘new to d’ then the ‘new to drag’ suggestion comes up. If I type only ‘new ‘ then I get a full 5 suggestions including most of the above!

If I change var limit = 5; then the ajax call only ever returns at most 5 results and the suggestion list doesn’t show up at all until I get ‘new to d’ i.e. ‘new ‘ gives no suggestions. This make me think it is to do with the number of ajax results being less than or equal to the typeahead limit. To test my theory I pushed 5 meaningless items into the json.options array so there were always more than 5 results and it all worked as expected – only I don’t want to always have meaningless suggestions at the bottom of my list. Any advice greatly appreciated!

Source: ajax

Leave a Reply