jQuery UI AutoComplete - встраивание списка в другой контейнер - PullRequest
Новая
       5

jQuery UI AutoComplete - встраивание списка в другой контейнер

2 голосов
/ 08 мая 2011

Мое приложение имеет довольно уникальный стиль для всех всплывающих окон, и я не могу заставить сгенерированный HTML-код автозаполнения jQuery UI работать в соответствии с этим стилем. То, что я хотел бы сделать, это поместить автозаполнение в готовый контейнер, настроенный для добавления.

Однако, когда я использую опцию appendTo, список не появляется, и, похоже, это происходит потому, что стиль размещает его где-то за пределами видимой области всплывающего окна. 

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

Все отлично работает, когда appendTo не установлен.

Итак: есть ли способ поместить содержимое автозаполнения в другой раздел, который уже правильно размещен?

1 Ответ

4 голосов
/ 11 мая 2011

Виджет автозаполнения создает элемент UL, содержащий предложения.Опция appendTo указывает, где этот элемент UL вставляется в DOM.По умолчанию элемент UL добавляется к телу.Стили затем используются для позиционирования UL в правильном месте.

В раскрывающемся списке автозаполнения добавляются ui-autocomplete и ui-menu-item classes.Вы должны быть в состоянии применить свой стиль к этим классам.Если нет, можете ли вы дать нам суть уникальных стилей, которые?

Для позиционирования вы можете переопределить стиль UL после того, как сработало событие open.Вот пример абсолютного позиционирования: 

$('#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");
    }
});

Вот пример позиционирования внутри элемента контейнера: 

$('#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");
    }
});
...