Typeahead.js: Make dropdown stay always open and visible and have content

[thany]

For debugging purposes. While styling the dropdown, it's extremely helpful to have the dropdown stay open then the input looses focus, so one can easily fiddle in firebug (or what have you) to finetune styling.

Currently the drodown closes when doing anything in firebug, so it's almost impossible to see what's applied and fiddle with it, especially on suggestion items.

[mikhuang]

I was struggling with the same when I found a workaround at http://stackoverflow.com/questions/15115059/programmatically-triggering-typeahead-js-result-display. Essentially, trigger the typeahead via console and fiddle with it from there. For instance, to start the typeahead with "M" do the following:

$(".tt-input").eq(0).val("M").trigger("input");

[thany]

Okay, the close indicates @jharding may not care too much about being able to style the dropdown properly. The piece of code by @mikhuang is certainly not a solution - a dirty workaround at best (no offense - it's the best we've got for now!). I was hoping for a class or some other semi-persistent trigger to open up the dropdown and have it _stay_ open. At least for the duration of a page's lifespan, or better yet, until I decide to disable said trigger.

[jharding]

Hmm, I may have been a little too trigger happy when I closed this. I'll go ahead and reopen it.

[thany]

No problem :)

[jharding]

With some of the changes that've landed in integration-0.11.0, there'll be a handful of ways you'll be able to deal with this problem. Probably the easiest way will be to do something like the following:

$('.typeahead').typeahead(/* init */)
.on('typeahead:beforeclose', function($e) { $e.preventDefault(); });

[adamterlson]

Is there any way to accomplish this today?

[brendanfalkowski]

Will be attempting to work around this shortly. As mentioned by @aswitalski in #889 this is a usability problem for mobile devices. Hiding an on-screen keyboard triggers losing focus in some browsers, but you need to extra screen space to scan the typeahead menu easily.

It would be a lot better for users (and designers) if they menu stayed visible until a click outside was detected. I know there's an explicit "not tested with mobile devices" warning in the README, but that's pretty impractical. Will report back what I find.

[lddubeau]

With 0.10.5 I worked around the issue with this code:

var tt = $.data([DOM node], "ttTypeahead");
tt.input.off("blurred");
tt._onBlurred = function () {
    this.isActivated = false;
};
tt.input.onSync("blurred", tt._onBlurred, tt);

[DOM node] is the DOM element on which the typeahead was created (e.g. $([DOM node]).typeahead(...)).

Unfortunately, any significant change to the core of the typeahead code will probably break this workaround. I tend stay away from such workarounds but the default behavior was significantly impacting the productivity of my users.

[jdrorrer]

I was able to get this working with a little css:
.tt-menu { display: block !important; }

I also set data-min-length=0 on the data-source.

Not ideal, but it does the trick!

[heacu]

With 0.11.1, if I want to keep the menu open most of the time, then I just return false from the "beforeclose" event. For example:

input.bind('typeahead:beforeclose',
                function (e) {
                    // keep menu open if input element is still focused
                    if ($(e.target).is(':focus')) {
                        return false;
                    }
                }
            );