Is there a way to close the dropdown menu for typeahead.js?

Question

I'm using typeahead.js for a typeahead.

I basically want to do the reverse of this: Programmatically triggering typeahead.js result display

I've tried to do a .trigger('blur'); on the typeahead, but I set the value right before that by doing .typeahead('setQuery', value);. Doing 'setQuery' fires off an ajax request to fetch results with the new query term. So the "blur" takes place, but the box is opened soon thereafter.

Drollery

So you want the dropdown to hide after you setQuery? FYI this might require some changes to the plugin itself. – Kishke

Correct, and I'm aware :/ – Drollery

Answer 1

Instead of calling setQuery, add another function that doesnt do getSuggestions, and youll have a good time.

Perky

Answer 2

The proper way to do this, as of version 0.11:

$('.typeahead').typeahead('close');

Manual: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#jquerytypeaheadclose

Taeniasis

Why for me it needs some mouse move to close!? – Jaynejaynell

and I get this message! Uncaught TypeError: s[n] is not a function – Jaynejaynell

In my particular test ([email protected]), the div/span control class get modified by the library to twitter-typeahead so, if it's not working, you might try $('.twitter-typeahead').typeahead('close'); – Adscription

Answer 3

Ref: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

$('.typeahead-input').typeahead('close');

Undocumented but there is way to set precondition and not allow dropdown to open:

$('.typeahead-input').on('typeahead:beforeopen', function() {
    return false;
});

Therron

Answer 4

In case someone comes across this in the future, the best way to do this now is:

$('.tt-dropdown-menu').css('display', 'none')

If you open Chrome developer tools and watch what happens as you type and erase, this is all Typeahead is doing, nothing magical.

Besides, if you try with the current version (10.5) to set the query, you'll get an error that looks like this:

Uncaught TypeError: Cannot assign to read only property 'highlight' of

None

Well I haven't downvoted but I suppose people probably like the solution to stick to the api. That said the api is not working for me (calling typeahead('close'), so I guess I will be subverting the api. Also if someone is using typeahead 0.11 the .tt-dropdown-menu seems to just be tt-menu. – Enterprise

Yes, in v.0.11 you will need $('.tt-menu').css('display', 'none'); – Adscription

Answer 5

In my particular case the dedicated close method from typeahead API ([email protected]) did not work. Maybe because of custom CSS or some bug in my code.

While the method described in the other answer of hiding the menu by setting the display property to none worked, I needed to set it then back to display:block to show it back for subsequent use. Plus it is not using the API.

Another better way for me was to clear the value of the input so the dropdown gets hidden:

$('.typeahead').typeahead('val', '');

or

$('#place_typeahead_control').typeahead('val', ''); in case you have multiple search controls on the page and you want to target a specific one.

Adscription

Answer 6

You can trigger 'blur' in the "opened" event handler. If the drop down flickers for a moment, you can use CSS to hide it for the interim.

Wilmawilmar

The "opened" event handler doesn't actually get called when the suggestion box pops open. The "opened" event gets called when the cursor is in the input. – Drollery