JQuery UI autocomplete nicht, das scrollen mit Pfeiltasten im Firefox

Arbeite ich mit der JQuery-UI-autocomplete mit JQuery 1.8 1.6.1. (Immer neuere software-Versionen, ist es extrem schwierig, in meiner Firma, so bin ich stecken mit diesen.)

Ich habe eine lange Liste von Zeichenfolgen platziert in der AutoVervollständigen-Bereich, also stylte ich das .ui-autocomplete-Klasse wie diese

.ui-autocomplete {height:200px; overflow-y:scroll; overflow-x: hidden;}

Nun, wenn der AutoVervollständigen-dropdown erscheint, hat es eine Bildlaufleiste angezeigt, wie gewünscht. Allerdings, wenn ich verwenden Sie die Pfeiltasten zum navigieren im dropdown-panel nicht scrollen mit der Auswahl. Die Auswahl noch viel passieren. Schließlich habe ich aus der unten in der Liste angezeigt, und der cursor wird wieder an den Anfang. Alles verhält sich wie erwartet, außer, dass die scroll-Bereich nicht scrollen.

In tests außerhalb der Arbeit, wo ich Zugang zu anderen Browsern, ich finde, dass chrome scrollt richtig und IE 8 Schriftrollen richtig. Ist das ein bug mit dem firefox 3.6 linux-browser oder bin ich etwas fehlt?

Bin ich Handschellen an Firefox 3.6 ua:(Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv1.9.2.12) Gecko/20101026 Firefox/3.6.1.2)

Ist das ein bug mit dieser version des Browsers oder bin ich etwas fehlt?

EDIT: ich war in der Lage zu finden, eine Maschine, die mit dem ie6 und mit firefox 3.5.3. ie6 gescrollt und firefox 3.5.3 nicht. Es scheint, dass es möglicherweise ein Problem mit firefox.

Hast du eine Lösung gefunden werden? Habe das gleiche problem
Nein, habe ich nicht. Ich bin überrascht, dass ich nicht bekommen, keine Antwort auf dieser.
Hier gilt das gleiche. +1 auf die Frage. Hoffentlich hat jemand eine Antwort
Welche version von jQuery-UI sind Sie? es scheint gut zu funktionieren in der neuesten (getestet auf Chrome): jsfiddle.net/69uk3/3
Siehe Erster Satz im obigen post. "Ich arbeite mit der JQuery-UI-autocomplete mit JQuery 1.8 1.6.1.". Mit diesem Unsinn aus dem Weg, das Verhalten ändert sich nicht auf jquery 1.7.0.
Hatte das gleiche Problem mit IE8 / jQueryUI v1.8.11. Aktualisiert um v1.8.21 und es ist behoben.

InformationsquelleAutor DRaehal | 2011-08-12

Ich hatte ähnliches Problem mit unserer app, die auf jQuery v1.7.2 und jQuery UI v1.8.11 auf jedem browser. Allerdings habe ich herausgefunden, dass es behoben wurde auf jQuery UI-v1.8.13 changelog.

Also nach dem Update in der änderungssatz, alles, was ich Tat, war nur überschreiben, zwei Funktionen, wie unten und es behebt das Problem.

$.widget("ui.menu", $.extend({ }, $.ui.menu.prototype, {
activate: function (event, item) {
    this.deactivate();
    if (this.hasScroll()) {
        var offset = item.offset().top - this.element.offset().top,
            scroll = this.element.scrollTop(),
            elementHeight = this.element.height();
        if (offset < 0) {
            this.element.scrollTop(scroll + offset);
        } else if (offset >= elementHeight) {
            this.element.scrollTop(scroll + offset - elementHeight + item.height());
        }
    }
    this.active = item.eq(0)
                      .children("a")
                      .addClass("ui-state-hover")
                      .attr("id", "ui-active-menuitem")
                      .end();
    this._trigger("focus", event, { item: item });
},

hasScroll: function () {
    return this.element.height() < this.element[$.fn.prop ? "prop" : "attr"]("scrollHeight");
}}));

InformationsquelleAutor InitialV

Lösung: Aktualisierung auf jQuery-UI-1.8.18 behoben das problem für mich.

Dies ist keine Antwort, aber es könnte mehr information über das Problem. Wenn Sie Folgen Sie den anrufen, wenn Sie drücken Sie die up-oder down-Tasten, wenn das Menü geöffnet ist, erhalten Sie die activate-Methode des Menü-widget ruft die hasScroll-Methode (Zeile 5487 mit v1.8.11);

hasScroll: function() {
    return this.element.height() < this.element.attr("scrollHeight");
},

Wie es scheint, das problem ist, dass die scrollHeight-Attribut ist nicht definiert für das Menü ul-element und somit ist diese Methode immer false zurückgegeben.

Hier ist die activate-Methode:

activate: function( event, item ) {
        this.deactivate();
        if (this.hasScroll()) {
            var offset = item.offset().top - this.element.offset().top,
                scroll = this.element.attr("scrollTop"),
                elementHeight = this.element.height();
            if (offset < 0) {
                this.element.attr("scrollTop", scroll + offset);
            } else if (offset >= elementHeight) {
                this.element.attr("scrollTop", scroll + offset - elementHeight + item.height());
            }
        }
        this.active = item.eq(0)
            .children("a")
                .addClass("ui-state-hover")
                .attr("id", "ui-active-menuitem")
            .end();
        this._trigger("focus", event, { item: item });
    }

Selbst wenn Sie die Kraft der hasScroll-Methode true zurückgibt, wird Sie auf ein anderes problem als die scrollTop-Attribut nicht definiert.

Ich lasse Sie wissen, wenn ich herausfinden, eine Lösung für dieses, wie es ist, plagt meine Anwendung als gut.

Wenn ich einen der jQuery-UI-1.8.18, ich werde versuchen Sie es und akzeptieren Sie die Antwort, wenn es funktioniert!

InformationsquelleAutor Nick Olsen

0

Bemerkte ich, dass this.element.attr("scrollHeight") im
```
hasScroll: function () {
        return this.element.height() < this.element.attr("scrollHeight");
    },
```
gibt undefined. Wenn Sie ändern this.element.attr("scrollHeight") zu this.element.prop("scrollHeight") stattdessen erhalten Sie eine scrollHeight.

Aber dann das gleiche problem wird in activate: function (event, item) {, so müssen Sie auch ändern Sie alle vorkommen von

this.element.attr("scrollTop") zu this.element.prop("scrollTop")

in dieser Funktion so gut zu machen, damit es funktioniert.

Lesen Sie über .prop() in der jQuery-API aber im Grunde der Grund dafür ist

Vor jQuery 1.6 die .attr () - Methode manchmal nahm Immobilien-Werte in Konto beim abrufen einige Attribute, die dazu führen könnten inkonsistente Verhalten. Wie von jQuery 1.6, die .prop () - Methode bietet eine Möglichkeit, explizit abrufen von Eigenschaftswerten, während .attr() ruft Attribute.

InformationsquelleAutor Johan Alkstål

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.