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

Question

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

我需要在页面中添加哪些内容，以及需要将哪些选项传递给自动完成功能才能正常工作？

Answer 1

另一个想法是：

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

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

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

Answer 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");
    },
    .....
});

Answer 3

您可以只使用 appendTo，就像这样

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