Move "tt-dropdown-menu" inside another div

[edukarma]

I am currently working on a project where we have to (for CSS proposes) move the tt-dropdown-menu outside of its current div, and inside another we define (because the container that sorrunds it has overflow-hidden).

Is this possible? Not necessarily asking for a fork, but maybe a workaround that I could use for my project.

[jharding]

In v0.11 you'll be able to specify the element that should be used as the container for the suggestions menu. If you want a solution for v0.10.5, I'm not aware of one that wouldn't require forking the project and hacking on the source code.

[jbardnz]

Hi

I would really like this feature as well. I am happy to wait until v0.11. Is their any information on a timeline for this release?

Cheers

[Spone]

Hi, same question here, is there a timeframe for v0.11?

[willblackmore]

I would also like to know this :)

[jharding]

v0.11 has been released (sorry for the loooonnnnng delay). I still need to document these new features though.

[teaisgood]

Just wondering if you have any documentation yet for this? Or if you could please give a quick pointer to get us started so that I can step through it and maybe figure out how it works myself.

Many thanks.

[riddla]

https://github.com/twitter/typeahead.js/blob/master/src/typeahead/www.js#L47:

function buildHtml(c) {
    return {
        wrapper: '<span class="' + c.wrapper + '"></span>',
        menu: '<div class="' + c.menu + '"></div>'
    };
}

... lets me guess that you only can adjust the CSS class names and not the concrete elements e.g. the markup.

[triplem]

Hello, since this is still not documented, how to do it then. Me is not finding the correct entry point. I would like to have the whole stuff contained outside of my input div. that now possible?

[ghost]

I have the same question. :-)

[TomZiesmer]

To set a different element for the menu, pass the element as a jQuery object as an option:

$('input').typeahead({
  menu: $('.special-dropdown')
})

[ghost]

With v0.11.1 using a different container for the menu per @TomZiesmer's comment works, but the menu does not dismiss when an item is selected or the escape key is hit. The _onEscKeyed method isn't firing.

If a custom menu container is not specified, then the menu functions correctly for escape and selection.

Here's a gist that demonstrates this issue: https://gist.github.com/DiomedeaExulans/32a3cf317bcbc7f0cf65

[silentbugs]

@ghost typeahead adds the .tt-open class to your results and properly removes it when you hit the escape key. You just need to handle it in your CSS.

#my-results {
    display: none;
}

#my-results.tt-open {
    display :block;
}

[VictorAbdon]

Hello I am using version 0.11.1 and trying to move the sugesstions menu into another container, I did as @TomZiesmer sugested, but it is not working for me, it remains adding the menu right next to the input.

May be because some other config that I am using? here are all the options I have, the "menu" property is not working for me.

var typeAheadOptions = {
            source: dataSrc, //An instance of a bloodhound object
            limit: 50,
            menu: $('#desired-container'),
            templates: {
                empty: [
                    '<div class="tth-empty">',
                    'No results',
                    '</div>'
                ].join('\n'),
                suggestion: function (data) {
                    var template = '<div class="tth-content">' +
                        "<span>" +
                       data['MyProperty'] +
                        "</span>" +
                    return template;
                }
            }
        };

$('#myInput').typeahead(typeAheadOptions );

[swarupcse414here]

Hi Victor,

Are you able to resolve this? I have a situation as well where I need to show the results of the typeahead input box into a different element in the same page.

I have added menu option along with minlength and local property but it did not work.

any help would be appreciated.

[Displee]

+1

Edit: I've found a work-around:

                            cell.on('typeahead:open', function() {
                                var $menu = cell.parent().find('.tt-menu');
                                me.offset = cell.offset();
                                me.offset.top += cell.outerHeight();
                                me.position = cell.position();
                                $('body').append($menu);
                                $menu.show();
                                $menu.css('position', 'absolute');
                                $menu.css('top', (me.offset.top) + 'px');
                                $menu.css('left', (me.offset.left) + 'px');
                                $(this).data("myDropdownMenu", $menu);
                            });
                            cell.on('typeahead:close', function() {
                                $(this).parent().append($(this).data("myDropdownMenu"));
                                var $menu = cell.parent().find('.tt-menu');
                                $menu.css('top', '100%');
                                $menu.css('left', '0px');
                            });