append to body mode

[henningn]

If the search field is within an overflow element (like <div style="overflow: hidden">), you can already append the suggestion menu to another DOM element.

$('.typeahead').typeahead({
  // ...
  menu: $('div-on-body')
}, /* dataset */);

In order to position the suggestion menu under the search field, you must do the calculations for top, left and width by yourself.

Wouldn't it be great if there is an "append-to-body" mode that makes these calculations for you?

[jlbooker]

I'm a bit confused as to why you want to append the suggestion menu to another DOM element (besides the input text field). Can you give an example or use case where this would be necessary?

[henningn]

My problem is this: https://jsfiddle.net/ezuy4wg9/1/

The search field is within a 'th' tag. The 'th' tag has overflow: hidden.
But even if I am able to remove the overflow: hidden from the 'th' tag there is a overflow: auto on .tobago-sheet-body.
The overflow: auto create a scrollbar if the suggestion result is too long.

What I want is this: https://jsfiddle.net/hfkfj8cs/1/
Here I have added the suggestion result to the $(div-on-body).
The positioning is done by:

$('#the-basics .typeahead').bind('typeahead:open', function() {
  var $input = jQuery(this);
  var $suggestPopup = jQuery(".div-on-body");
  $suggestPopup.css("top", $input.offset().top + $input.outerHeight() + "px");
  $suggestPopup.css("left", $input.offset().left + "px");
  $suggestPopup.css("min-width", $input.outerWidth() + "px");
});

What I mean with the "append-to-body" mode is:
You write

$('.typeahead').typeahead({
  // ...
  appendToBody: true
}, /* dataset */);

and typeahead.js create the "div-on-body" element and append the suggestion results on that.
Also typeahead.js do the positioning of the results.

[jlbooker]

Putting the search field inside a th tag is a little odd, but I suppose technically allowable.

I don't think doing the fixed positioning calculations is a robust way of laying out the suggestion list. It may work here, but I bet we'd quickly run into inconsistencies with other markup and browsers.

Also, the div-on-body classname would need to be customizable, as that may conflict. It also breaks the "contract" that typeahead has, in that it is attached to text field and handles all its own markup from there.

Since this is outside the typical use case, I think keeping your workaround is probably best rather than adding complexity. Perhaps try adding the fixed position styles with the tt-menu class instead?

[ViRuSTriNiTy]

Positioning the popup in the open event won't work properly because the event fires before suggestion rendering takes place (at least in my scenario where i use a remote dataset).

By using the render event and jQuery UI position it seems to work flawlessly even when the site shifts content around as the position plugin takes care of that too:

// using render event instead of open as open fires before suggestions are rendered resulting
// in invalid menu dimenions being used in position calculation, bug?!?
$input.bind("typeahead:render", function() {
  $menu.position({
    my: "left top",
    at: "left bottom",
    of: $input,
    collision: "flipfit"
  });