My app has a pretty unique style for all the popups that occur, and I can't make the generated jQuery UI Autoplete html work to fit into that style. What I'd like to do is place the autoplete 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').autoplete({
  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 autoplete into another div that's placed correctly already?

My app has a pretty unique style for all the popups that occur, and I can't make the generated jQuery UI Autoplete html work to fit into that style. What I'd like to do is place the autoplete 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').autoplete({
  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 autoplete into another div that's placed correctly already?

• javascript
• jquery
• jquery-ui
• jquery-ui-autoplete

• What does the markup for the existing div look like? How is it styled? – Andrew Whitaker Commented May 8, 2011 at 18:34
• can you setup a jsfiddle with the current code? – ariel Commented May 9, 2011 at 1:41

1 Answer 1

The autoplete 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 autoplete dropdown adds the ui-autoplete 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').autoplete({
    minLength: 0,
    source:"this,that,these,those".split(','),
    open: function(event, ui) {
        $(".ui-autoplete").css("position", "absolute");
        $(".ui-autoplete").css("top", "100px");
        $(".ui-autoplete").css("left", "100px");
    }
});

Here is an example of positioning inside a container element:

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