Как я могу получить предложения автозаполнения JQuery-UI, чтобы появиться в другом месте на странице?

Question

У меня есть текстовое поле с автозаполнением jquery-ui. Я бы хотел, чтобы предложения появлялись в области с фиксированной высотой над текстовой областью, так же, как подсказки для заголовка появляются под полем заголовка здесь в stackoverflow.

Что мне нужно добавить на мою страницу, и какие опции мне нужно передать функции автозаполнения, чтобы это работало?

Answer 1

Я нашел, что это сработало ....

$('#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 2

Вы можете просто использовать appendTo, вот так

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

Answer 3

Другая идея заключается в следующем:

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

Затем вы должны перезаписать класс ui-autocomplete, чтобы адаптироваться к вашему собственному дизайну и удалить его реальное поведение (изменение его положения, размера и всего, что вы хотите)..

Будьте осторожны, так как в первой строке удаляются все списки автозаполнения.Удачной кодировки!