如何让 jquery-ui 自动完成建议出现在页面的其他位置？答案

【问题标题】：How can I get jquery-ui autocomplete suggestions to appear elsewhere on the page?如何让 jquery-ui 自动完成建议出现在页面的其他位置？
【发布时间】：2011-07-14 23:07:41
【问题描述】：

我有一个带有 jquery-ui 自动完成功能的 textarea。我希望建议出现在 textarea 上方的固定高度区域中，就像标题建议出现在 stackoverflow 上的标题框下方一样。

我需要向我的页面添加什么，以及我需要将哪些选项传递给自动完成功能才能使其正常工作？

【问题讨论】：

只要知道是哪一个，就可以简单地使用 css 重新定位结果的包装器：)

标签： jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

另一个想法是这样的：

var searchbox = $('.ui-autocomplete');  // get autocomplete list
$('.ui-autocomplete').remove();    // remove the original
$('#mydiv').prepend(searchbox);     // prepend to your desire div

然后，您应该覆盖 ui-autocomplete 类以适应您自己的设计并移除其实际行为（更改其位置、大小以及您想要的任何内容）。

请小心，因为第一行删除了所有自动完成列表。编码快乐！

【讨论】：

【解决方案2】：

我发现它可以做......

$('#myInputSelector').autocomplete({
    ....
    open: function(event, ui) {
        $(".ui-autocomplete").appendTo("#search-results")
        .css("width", "300px")
        .css("height", "100px")
        .css("position", "absolute")
        .css("top", "0px")
        .css("left", "0px");
    },
    .....
});

【讨论】：

【解决方案3】：

你可以直接使用appendTo，像这样

$('#the-textarea').autocomplete({
    ...
    appendTo: $('#the-area-above-the-textarea'),
    ...
});

【讨论】：