Исправлено позиционированное окно поиска с предложениями автозаполнения

Question

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

#toolbar {
        position: fixed !important; 
        position: absolute;
        height: 25px;
        width: 100%;
        top: 0px;
        left: 0px;
        margin: 0;
        z-index: 100;
        font-size: 12px;
    }

Теперь я реализую функцию автозаполнения ключевых слов, используя плагин jQuery .

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

Поле css для предложений автозаполнения: ....

element.style {
   display:none;
   left:166px;
   position:absolute;
   top:96px;
   width:130px;
}
.ac_results {
   background-color:white;
   border:1px solid #C5DBEC;
   overflow:hidden;
   padding:0;
   z-index:99999;
}

У меня проблема при выполнении этих операций ..

1. Введите что-нибудь в поле поиска, чтобы появилось предложение
2. Когда окно поиска открыто, я прокручиваю окно.
3. Это также приводит к прокрутке окна автозаполнения.

Что я могу сделать, чтобы решить эту ошибку?

Вот как это выглядит.

Автозаполнение прокручивается в поле ввода с фиксированным положением.

Обновление 1: я попытался добавить position: fixed; к автозаполнению.

Это создает проблему в другом случае.

• Введите что-нибудь в поле поиска, чтобы появилось предложение
• Нажмите escape, вызывая исчезновение окна
• Прокрутите вниз окно
• Введите что-нибудь в поле поиска, чтобы появилось предложение
• Теперь окно поиска появляется в позиции, в которой оно находилось до прокрутки, так как позиция фиксирована

Обновление :

Обновление 2 :

Следующий код, добавленный к автозаполнению css, делает свое дело.

.ac_results {
       background-color:white;
       border:1px solid #C5DBEC;
       overflow:hidden;
       padding:0;
       z-index:99999;
       position: fixed;
       top: 0px;
       margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
    }

Привет

Answer 1

Почему бы не сделать результаты поиска position: fixed? Если вы знаете высоту текстового поля, вы можете расположить список результатов так, чтобы он всегда находился только под элементом текстового поля.

Answer 2

position: относительный на контейнере, который содержит список результатов (который имеет position: absolute), решает проблему.

Answer 3

position:fixed не способ делать то, что вы ищете.

позиция: абсолютная должна была решить вашу проблему, что заставляет меня думать, что это ошибка браузера (какие браузеры вы тестировали) или что-то в плагине или css перезаписывает position:absolute с position:fixed -Вы проверили FireBug в Firefox, чтобы увидеть фактический CSS, применяемый к выпадающему окну?

Это единственные две причины, по которым я могу объяснить, что вы видите.