Twitter TypeAhead show all results programmatically

Question

I've been busting my head on this for a while now. There are other answers floating around SO and other sites saying that if I change the value of my input to something else, then back to my original value, that TypeAhead will display.

Nothing is working in my case.

I retrieve my results like so:

$(element).typeahead({
    hint      : true,
    highlight : true, // This is to bold words that match the query
    minLength : queryLength
}, {
    name      : "results",
    displayKey: "value",
    source    : bhResults.ttAdapter()
});

After which, I've tried to forcefully display a drop down with all the results like so:

    window.setTimeout(function () {
        $(element).typeahead('val', value);
        $(element).focus();
        $(element).trigger("input");
        $(element).val('mood');
    }, 1000);

However, nothing is working!

Firkin

Answer 1

One of the github issues covers a workaround: https://github.com/twitter/typeahead.js/issues/798

Rafferty

Hi, I thought this would be working for me also since the jsfiddle works fine, but I am using the bloodhound suggestion engine and the down arrow is not making the list appear...do you have any idea? Here is the fiddle that I thought would be working : jsfiddle.net/5xxYq/30 It works fine when you type letters but not with the down arrow or click. Thanks! – Bobinette

Answer 2

This works for me:

( function( $ )
{
    function obtainer(query, cb) 
    {
        var filteredList = $.grep( allowed_sites, function (item, index) {
            return item.value.match(query);
        });

        var mapped = $.map( filteredList, function (item) { return item }); // data is already formatted as array of objects with with id/value keys, so return whole "row" object
        cb( mapped );
    }

    $('#my-container .typeahead').typeahead(
        {
            hint: true,
            highlight: true,
            minLength: 0
        },
        {
            name: 'my-typeahead',
            displayKey: 'value',
            source: obtainer 
        }
    ).on( 'typeahead:autocompleted typeahead:selected keyup', function(e, row) 
        {
            // do stuff with data
        } 
    ).on( 'typeahead:opened', function() 
        {
            var ev = $.Event("keydown");
            ev.keyCode = ev.which = 40;
            $(this).trigger(ev);
            return true
        } 
    );
} )( jQuery );

Stripe