In meiner Webapp habe ich ein Suchfeld in einer festen Symbolleiste oben auf der Webseite. Ich habe die feste Position der Symbolleiste so implementiert ....

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

Jetzt implementiere ich eine Funktion zum automatischen Vervollständigen von Schlüsselwörtern mita jQuery-Plugin.

Mein Problem ist, wie die Vorschläge für die automatische Vervollständigung beim Scrollen / Ändern der Größe des Fensters im Suchfeld fixiert / angehängt bleiben.

Die CSS-Box für Vorschläge zur automatischen Vervollständigung ist ....

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;
}

Ich habe ein Problem, wenn ich diese Vorgänge durchführe.

Geben Sie etwas in das Suchfeld ein, wodurch die Vorschläge angezeigt werden Mit geöffnetem Suchfeld scrolle ich durch das Fenster.Dies bewirkt, dass das Feld für automatische Vorschläge ebenfalls gescrollt wird.

Was kann ich tun, um diesen Fehler zu beheben?

Hier sieht es aus.

Die Autovervollständigung ist über das fest positionierte Eingabefeld gescrollt.

Aktualisiere 1: Ich habe versucht, das @ hinzuzufügposition: fixed; zur Autovervollständigung.

Das gibt Problem in einem anderen Fall.

Geben Sie etwas in das Suchfeld ein, wodurch die Vorschläge angezeigt werden Drücken Sie die Escape-Taste, wodurch die Box verschwindet. Scrolle das Fenster runterGeben Sie etwas in das Suchfeld ein, wodurch die Vorschläge angezeigt werdenJetzt wird das Suchfeld an der Position angezeigt, an der es vor dem Scrollen angezeigt wurde, da die Position festgelegt ist

Aktualisiere:

Update 2:

Der folgende Code, der zur automatischen Vervollständigung von CSS hinzugefügt wurde, erledigt den Trick.

.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 */
    }

Grüß