Script.aculo.us Проблема автозаполнения в IE

Question

Я борюсь с проблемой с контролем автозаполнения Script.aculo.us в IE (я пробовал в IE6 и 7). Предложения не отображаются, поскольку первый символ вводится в текстовое поле после загрузки страницы. После этого начального сбоя управление работает как надо.

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

Кто-нибудь слышал о такой проблеме или есть предложения по ее устранению?

Изменить: В ответ на Крис, я установил параметр partChars в 1, и элемент управления работает во всех других браузерах, которые я пробовал, которые являются последними версиями Firefox, Safari, Opera и Chrome. Я, наверное, должен был это прояснить в первую очередь. Благодарю.

Answer 1

У меня действительно такая же проблема. Проблема возникает только в IE (также в 8.0 бета)

Как Firefox, так и Chrome, которые я пробовал, не имеют никаких проблем.

По мнению других, это связано с объявлением DOCTYPE в файле HTML. Проверьте здесь: http://prototype.lighthouseapp.com/projects/8887/tickets/32-ajax-autocomplete-in-ie-with-doctype

Ошибка также получила билет на форумах разработчиков ruby: http://dev.rubyonrails.org/ticket/11051

Обе ссылки имеют решения для устранения проблемы.

Надеюсь, ошибка будет исправлена ​​в следующей версии prototype/scriptaculous:)

Answer 2

Большое спасибо за взлом. Я использовал это сам, но изменил его так, чтобы он вызывался только тогда, когда используется Ajax.Autocompleter, выполнив следующие действия.

function positionAuto(element, entry) {
    setTimeout( function() {
      Element.clonePosition('choices_div', 'text_element', {
      'setWidth': false,
      'setHeight': false,
      'offsetTop': $('text_element').offsetHeight
    } );
  }, 300);
  return entry;
}

new Ajax.Autocompleter('text_element', 'choices_div', [url to web service], {
  paramName: 'fulltext',
  minChars: 2,
  callback: positionAuto, // See above
  [etc...]

Поскольку обратный вызов вызывается непосредственно перед тем, как будет сделан реальный запрос, позиционирование DIV именно в этот момент имеет смысл. И убедитесь, что даже если размер окна изменен или прокручен, DIV будет правильно расположен. Что сводит с ума то, что для того, чтобы он работал последовательно, мне пришлось обернуть его в "setTimeout()". Я не слишком много экспериментировал с разными настройками времени, но если есть более низкий порог времени ожидания, я хотел бы знать.

Проверено на IE 8 & 7 и работает очень хорошо. И работает с другими реальными браузерами. Надеюсь, это избавит некоторых программистов от головной боли при работе с этим.

Answer 3

Ваша проблема только в IE или во всех браузерах? Игнорирование первого символа на самом деле является значением по умолчанию для автозаполнения. В controls.js есть класс с именем Autocompleter.Local, в котором имеется поле с именем partalChars, значение по умолчанию - 2. Документы для этого поля говорят:

// --partalChars - сколько символов нужно ввести до запуска
// частичное совпадение (в отличие от minChars, которое определяет
// сколько символов требуется для любого совпадения
// совсем). По умолчанию 2.

Answer 4

После долгих попыток решить эту проблему в IE8/IE9 я использовал CSS-хак. Метод здесь состоит в том, чтобы принудительно установить относительное положение внутри контейнера с абсолютным позиционированием. Дополнительный контейнер необходим для того, чтобы перенести выбор над другими элементами.

div.acwrap {
  position: absolute;
  height: 40px;
}

div.autocomplete {
  position: relative !important;
  top: -5px  !important;
  left: 0px !important;
  width:250px;
  margin:0;
  padding:0;
}

В моем HTML-коде я использовал следующие классы:

<div class="acwrap">
 <div id="autocomplete_choices" class="autocomplete">
 </div>
</div>

Идея возникла здесь: Scriptaculous / Prototype IE 8 Проблема исчезновения автозаполнения.

Answer 5

Это известная ошибка с патчем, который работает, но еще не был включен. Вы можете прочитать больше об этом здесь: https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/618-getoffsetparent-returns-body-for-new-hidden-elements-in-ie8-final

Answer 6

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

new Ajax.Autocompleter(textInputId, suggestionsHolderId, suggestionsUrl, params);

//Hack
Event.observe(window, 'load', function()
{
    try
    {
        Position.clone($(textInputId), $(suggestionsHolderId),
            { setHeight: false, offsetTop: $(textInputId).offsetHeight});
    }
    catch(e){}
});