YUI автозаполнение проблема смещения

Question

Я использую функцию автозаполнения YUI. Однако, как вы можете видеть, у меня возникают проблемы с выравниванием выпадающего списка с вводом текста, когда я помещаю метку перед вводом текста. Я следую приведенному здесь примеру точно за исключением этого фрагмента кода, где я просто заменяю H3 элементом метки в форме:

<div id="myAutoComplete">
<label>Enter a state:</label>
    <input id="myInput" type="text">
    <div id="myContainer"></div>
</div>

<script type="text/javascript" src="http://developer.yahoo.com/yui/examples/autocomplete/assets/js/data.js"></script>

(Мне также пришлось изменить путь data.js от относительного к абсолютному пути.)

Каков наилучший способ, чтобы предложение выпадало в соответствие с вводом текста? Я хотел бы решение, которое работает на всех популярных современных браузерах (FF3, Safari, Chrome, IE), а также IE6.

Answer 1

AutoComplete не выполняет автоматическую обработку положения вашего контейнера AC каждый раз, когда он показывает, потому что, если вы не выполняете встроенную работу, это не нужно. Однако теперь, когда вы переместили свое поле ввода в строку, вам нужно сделать еще один шаг, чтобы выровнять контейнер, либо с помощью пользовательского CSS или позиционирования JS методом грубой силы.

Вот подход грубой силы.

После того как вы определите свой экземпляр AC:

oAC.doBeforeExpandContainer = function() {
    var Dom = YAHOO.util.Dom;
    Dom.setXY("myContainer", [Dom.getX("myInput"), Dom.getY("myInput") + Dom.get("myInput").offsetHeight] );
    return true;
}

Вот рабочий пример:

http://ericmiraglia.com/yui/demos/acalign.php

Answer 2

У меня была такая же проблема ...

Я хотел встроенное автозаполнение YUI, чтобы поместить метку, а затем текстовое поле с автозаполнением без разрыва строки. И я нашел ответ: http://starikovs.com/2009/11/04/inline-yui-autocomplete-layout/. Это решение CSS, там нет JavaScript.

Answer 3

Это не ошибка, а простая настройка, необходимая для конкретного дизайна.

Если вы не используете URL для добавления этих js-файлов, вам просто нужно найти js-код, который генерирует таблицу / div, которая заполняет ваши результаты. Код будет либо генерировать целую таблицу на лету, либо установит видимость уже скрытой таблицы / div в 'visible'. Если вы найдете этот код, вам просто нужно добавить атрибут, чтобы установить его левое положение, чтобы оно совпадало с положением «px» вашего текстового поля.

Или найдите класс css, применяемый к этому контейнеру результата, и попробуйте установить его влево и абсолютную позицию.

Answer 4

Похоже, что этот плагин автозаполнения не использует печально известную позицию элемента методом quirksmode для поиска позиции real элемента на странице.

Нужно ли, чтобы метка находилась рядом с полем ввода? Вы можете легко исправить это, либо вставив <br> после label, либо установив margin-left для элемента <div id="myContainer">.

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