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() {
    $('.typeahead').typeahead('destroy');
    $('.typeahead').typeahead({
      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!

回答1:

I had a similar problem. It looks like its a bug in version 0.11.1 of Typeahead. Try the solution here: https://github.com/twitter/typeahead.js/pull/1212 and see if that works.

The specific change is this: https://github.com/per-nilsson/typeahead.js/commit/387290b1e70be0052c6dd9be84069f55d54a7ce7

回答2:

Following the advice of agustaf. I am using the twitter-typeahead-rails gem. I created a fork and bumped the version to 1.0.1 which fixes this error for me which might be the same or relevant.

In my case i had two results from remote source but only one of the two was used for suggestion.

I did a pull request - but not sure if it will get merged. However for future rails users who might see this use my fork and specifically the branch i state.

add to your gemfile

gem 'twitter-typeahead-rails', :git => "git://github.com/pitops/twitter-typeahead-rails.git" , :branch => "bump_version_to_1.0.1"

来源：https://stackoverflow.com/questions/30798859/twitter-typeahead-ajax-results-not-all-shown

标签

ajax

json

twitter

typeahead.js