Programmatically triggering typeahead.js result display

Question

I am using Twitter\'s typeahead.js (https://github.com/twitter/typeahead.js/) on an input field which is pre filled from a query string. After loading the page, i\'d like to

Answer 1

Using: Typeahead v0.10.5

Don't use: $('.typeahead').typeahead('open');

This currently does not work. Source: https://github.com/twitter/typeahead.js/issues/798. As a temporary fix, use a a custom jQuery keydown event (after you have instantiated the typeahead):

var ttInstance = $('.typeahead').typeahead( config ); // Create Typeahead
ttInstance.typeahead('val', 'pancakes'); // Set an initial value

var evt = jQuery.Event('keydown');
evt.keyCode = evt.which = 40;
ttInstance.trigger(evt); // Opens the dropdown

Answer 2

$(".typeahead").typeahead('lookup').focus();

triggers with existing value of input. you can change the value in advance of course

Answer 3

None of these will work unless you deliberately put 'typeahead' into the classes of your input tag. If you don't feel the need to do this (it's not necessary for it to work), you're better off using the class written onto the input tag by typeahead.js. It's ".tt-input". Here's the example I cribbed from Sam_Butler, recoded for the new CSS class. This works for me in the most recent typeahead 0.10.5:

var theVal = jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val', 're')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();

Answer 4

Here's a simplified version of @Sam_Butler's work: http://jsfiddle.net/rimian/hrnf9

<button type="button" id="button">Crick</button>
<input type="text" id="text" class="typeahead">

Javascript:

$('#button').click(function() {
  $("#text").focus().typeahead('val', 'London');
});

// instantiate the bloodhound suggestion engine
var locations = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=%QUERY&components=country:GB&sensor=false&region=uk', //add key
        filter: function (locations) {
            return $.map(locations.results, function (location) {
                return {
                    value: location.formatted_address
                };
            });
        }
    }
});

locations.initialize();

$('#text').typeahead(null, {
    name: 'value',
    displayKey: 'value',
    source: locations.ttAdapter()
});

Answer 5

Be careful with this!

For those who are thinking about trigger typeahead behavior manually (on a button click for example) I strongly recommend you to don't do this.

I came for this solution and I lost almost an entire day making workarounds to it work properly (in my case that was a button click).

For those who really want go by this dark way, I share with you my ugly code that makes it work:

//Removes default features of typeahead
//This means that typeahead will not work like an "autocomplete", it only will be trigged when the user Click in #btnSearch button!
var txt = $("#typeahead");
//Save input events in variables (we'll need them)
eventInput = $._data(txt[0], "events").input[0];
eventBlur = $._data(txt[0], "events").blur[1];
//Remove input events
txt.unbind("blur");
txt.unbind("input");

//Set click event that triggers typeahead features manually
$("#btnSearch").click(function () {
    //Clears the cache of engine for it call ajax again, without it when the term was already searched the ajax is not called!
    engine.clearRemoteCache();

    txt.focus(); //When we click in a button, the focus from input is lost, so we set it again to not lose the behaviors of keyboard keys (up, down, tab, etc)
    txt.bind("input", eventInput); //Bind the event that we had saved
    txt.trigger("input"); //Trigger input (like the answer from @epascarello)
    txt.unbind("input"); //Removes it again 
});

//Set event on parent of the suggestion's div, this makes the sugestion div close when user click outside it
$("body").click(function () {            
    if (eventBlur != undefined) {
        if ($(".tt-dropdown-menu:visible").length > 0) {
            eventBlur.handler(); //This event closes the suggestion menu
        }
    }
});

Another thing that I did was change a code of the event "_checkInputValue" on typeahead.js. I change this:

areEquivalent = areQueriesEquivalent(inputValue, this.query);

to this:

areEquivalent = false;//areQueriesEquivalent(inputValue, this.query);

I set it to false because typeahead don't send two identical requests to server. This occur when the user clicks twice in the search button (I mean, when he searches more than once the same text that he has already searched for). Anyway, if you are using local data you won't need to do this.