Изменение положения автозаполнения jQuery UI при изменении размера браузера

Question

Существует проблема, если вы открываете выпадающий список автозаполнения, а также изменяете размер окна браузера, при этом выпадающий список автозаполнения не перемещается. Выделено в этом видео: http://www.youtube.com/watch?v=d7rZYH0DgWE

Я посмотрел документацию и не могу найти метод репозиции (в документации jquery-ui http://jqueryui.com/demos/autocomplete), который можно вызвать в вызове функции $ (window) .resize ().

Есть ли в этом элегантная душа?

Answer 1

Я бы предложил просто закрыть результаты при изменении размера страницы.

$(window).resize(function() {
    $(".ui-autocomplete").css('display', 'none');
});

Когда пользователь изменяет ширину окна, оно исчезает, и если они набирают текст снова, оно снова появляется, как и должно быть, правильно расположено.

Answer 2

Опять-таки, один из способов решения этой проблемы - просто вызвать поле автозаполнения для поиска при изменении размера:

* 1003 например *

$(window).resize(function() {
    $( "#autocomplete-field" ).autocomplete( "search" );
});

Это вернет выпадающий список автозаполнения.

Вы также можете убедиться, что автозаполнение кэширует результаты, чтобы оно не попадало в базу данных при повторном поиске. И еще одна вещь, которую нужно учитывать, это вызов автозаполнения («поиск») в функции тайм-аута для улучшения отзывчивости пользовательского интерфейса Событие изменения размера окна браузера - JavaScript / jQuery

Answer 3

Вот еще одно решение, если вы не хотите повторить поиск или закрыть окно.

$(window).resize(function() {
  var position = $("#autocompleteField").offset();
  var properties = { left: position.left,
                     top: position.bottom };
  $(".ui-autocomplete").css(properties);
});

Answer 4

Да, это возможно, но это очень сложно.Вы должны изменить как CSS, так и плагин.Это функциональность по умолчанию устанавливает верхний и правый атрибуты.Вы должны изменить плагин, чтобы расположить div (или ul) относительно ширины и высоты документа.(то есть top: 50%, right: 50%; margin-left: -500px; margin-top: -100px).

Вы также можете уничтожить деление при изменении размера, если не хотите вносить изменениявверх.Он появится снова при изменении на основе новой ширины и высоты документа

Answer 5

Для меня работает вызов поля автозаполнения для поиска по изменению размера. Одно, что нужно добавить: убедитесь, что поиск выполняется только при изменении размера, когда результат поиска виден. В противном случае поиск выполняется даже после выбора одного элемента из поля результатов.