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.

So you want the dropdown to hide after you `setQuery`? FYI this might require some changes to the plugin itself. — Dan-Nolan, Aug 14 '13 at 23:51

score 17 · Answer 1 · answered May 18 '15 at 22:22

17

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

answered May 18 '15 at 22:22

Razvan Grigore

1,649
17
17

Why for me it needs some mouse move to close!? – DaNeSh Jan 13 '16 at 15:38
1

and I get this message! Uncaught TypeError: s[n] is not a function – DaNeSh Jan 13 '16 at 15:43
In my particular test (typeahead.js@0.11.1), 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');` – Alex P. Jan 09 '19 at 22:52

score 1 · Answer 2 · answered May 01 '19 at 19:24

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;
});

onetwopunch · Answer 3 · 2015-04-02T22:58:47.030

0

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

edited Apr 02 '15 at 22:58

answered Apr 02 '15 at 22:45

onetwopunch

3,279
2
29
44

1

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. – user254694 Jan 23 '17 at 08:35
Yes, in v.0.11 you will need `$('.tt-menu').css('display', 'none');` – Alex P. Jan 09 '19 at 22:54

score 0 · Answer 4 · answered Jan 09 '19 at 23:27

In my particular case the dedicated close method from typeahead API (typeahead.js@0.11.1) 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.

score -1 · Answer 5 · answered Aug 15 '13 at 18:55

-1

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.

answered Aug 15 '13 at 18:55

Nitzan Shaked

13,460
5
45
54

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. – nwalke Aug 15 '13 at 19:54

score -3 · Accepted Answer · answered Aug 15 '13 at 20:19

-3

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

answered Aug 15 '13 at 20:19

Trololololol

200
4
18

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

6 Answers6