Автозаполнение JqueryUi показано в неправильном месте при использовании поля ввода в div с позицией: fixed

У меня есть "модальное окно" на веб-странице, полученной путем применения к div свойства css position до fixed. div содержит поля ввода. В частности, я использую виджет автозаполнения от jQueryUI. Существуют две основные проблемы:

1) первое заключается в том, что, поскольку div имеет фиксированную позицию, когда вы прокручиваете веб-страницу, предложения автозаполнения не отображаются исправленными, а перемещаются вверх и вниз со страницей. Вы можете увидеть эту проблему на этом Codepen, где я использую пример с сайта jQuery с автозаполнением имени города.

2) Вторая проблема заключается в том, что предложения из автозаполнения показаны в верхнем левом углу страницы, а не только под полем ввода. К сожалению, я попытался воспроизвести эту проблему в Codepen, но не могу.

Я уверен, что проблема связана с CSS и, в частности, с такими свойствами стиля, которые предоставляет JQuery-UI. Возможно, проблему можно решить, используя опцию позиции виджета автозаполнения.

Какое свойство CSS следует определить и как?

PS: Я использую тему, представленную в http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.

Ответ 1

Посмотрев на библиотеку пользовательского интерфейса jQuery, я вижу, что элемент &lt > ul > используется для отображения предложений. jQuery UI добавляет этот элемент по умолчанию к HTML-документу, а не к <div> (используется как "модальное окно" ) текста ввода.

Однако документация показывает, что параметр appendTo настраивает, к какому элементу следует добавить автозаполнение <ul> . Он использует функцию jQuery appendTo(). http://jqueryui.com/demos/autocomplete/#option-appendTo

Итак, я включил div, содержащий предложения:

<input type="text" id="myInput" />
<div id="container">
</div>

И в функции autocomplete() я добавил параметр:

appendTo: "#container"

Затем я добавил следующий CSS

#container {
    display: block; 
    position:relative
} 
.ui-autocomplete {
    position: absolute;
}

Что все!

Ответ 2

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

EDIT: это была настоящая проблема

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

Ответ 3

Убедитесь, что вы загружаете только одну версию JQuery и один из пользовательских интерфейсов Я обнаружил это после прочтения ответа @Riapp, я играл и видел, что вам нужны соответствующие номера версий и никогда не слишком много....

В противном случае автозаполнение будет абсолютным и пролетел бы вверх.

 <script type="text/javascript"
    src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css"
    href="#" onclick="location.href='https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css'; return false;" />