jquery UI AutoComplete - embedding the list in another container

My app has a pretty unique sty开发者_开发百科le for all the popups that occur, and I can't make the generated jQuery UI Autocomplete html work to fit into that style. What I'd like to do is place the autocomplete into a pre-made container that's configured to drop in.

However, when I use the appendTo option, the list doesn't appear, and it seems to be because the style is positioning it somewhere outside the visible area of the popup.

$('#name').autocomplete({
  minLength: 0,
  source:"this,that,these,those".split(','),
  appendTo: '#popover-hook'
});

Everything works fine when appendTo isn't set.

So: is there a way to put the contents of the autocomplete into another div that's placed correctly already?

The autocomplete widget creates a UL element containing the suggestions. The appendTo option specifies where that UL element gets inserted into the DOM. By default, the UL element is appended to the BODY. Styles are then used to position the UL in the correct location.

The autocomplete dropdown adds the ui-autocomplete and ui-menu-item classes. You should be able to apply your style to those classes. If not, can you give us an essence of the unique styles that?

For positioning, you can override the styling of the UL after the open event fires. Here's an example of absolute positioning:

$('#name').autocomplete({
    minLength: 0,
    source:"this,that,these,those".split(','),
    open: function(event, ui) {
        $(".ui-autocomplete").css("position", "absolute");
        $(".ui-autocomplete").css("top", "100px");
        $(".ui-autocomplete").css("left", "100px");
    }
});

Here is an example of positioning inside a container element:

$('#name').autocomplete({
    minLength: 0,
    source:"this,that,these,those".split(','),
    appendTo: "#container",
    open: function(event, ui) {
        $(".ui-autocomplete").css("position", "relative");
        $(".ui-autocomplete").css("top", "0px");
        $(".ui-autocomplete").css("left", "0px");
    }
});