Wie entferne / ändere ich den JQuery UI Autocomplete Helper-Text?

Es scheint, dass dies eine neue Funktion in JQuery UI 1.9.0 ist, da ich JQuery UI schon oft verwendet habe und dieser Text nie aufgetaucht ist.

In der API-Dokumentation wurde nichts gefunden.

Verwenden Sie also ein einfaches Beispiel für die automatische Vervollständigung mit lokaler Quelle

$( "#find-subj" ).autocomplete({
    source: availableTags
});

Wenn die Suche übereinstimmt, wird der zugehörige Hilfetext angezeigt:

"1 Ergebnis ist verfügbar. Verwenden Sie die Aufwärts- und Abwärtspfeiltasten, um zu navigieren."

Wie kann ich es auf nette Weise deaktivieren, nicht indem ich es mit JQuery-Selektoren entferne?

Ich weiß, dass dies beantwortet wurde, wollte aber nur ein Implementierungsbeispiel geben:

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++"
    ];

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});

Dies wird für die Barrierefreiheit verwendet. Eine einfache Möglichkeit, es auszublenden, ist CSS:

.ui-helper-hidden-accessible { display:none; }

Oder (siehe Daniels Kommentar unten)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }

Die beste Antwort hier erzielt den gewünschten visuellen Effekt, besiegt jedoch das Objekt von jQuery mit ARIA-Unterstützung und ist für Benutzer, die sich darauf verlassen, etwas dicklich! Diejenigen, die erwähnt haben, dass jQuery CSS dies für Sie verbirgt, sind korrekt, und dies ist der Stil, der dies tut:

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Kopieren Sie das in Ihr Stylesheet, anstatt die Nachricht zu entfernen, bitte :).

Laut diesem Blog :

Wir verwenden jetzt ARIA-Live-Regionen, um bekannt zu geben, wann Ergebnisse verfügbar sind und wie Sie durch die Liste der Vorschläge navigieren können. Die Ankündigungen können über die Nachrichtenoption konfiguriert werden, die zwei Eigenschaften hat: noErgebnisse für den Fall, dass keine Artikel zurückgegeben werden, und Ergebnisse für den Fall, dass mindestens ein Artikel zurückgegeben wird. Im Allgemeinen müssten Sie diese Optionen nur ändern, wenn die Zeichenfolge in einer anderen Sprache geschrieben werden soll. Die Nachrichtenoption kann sich in zukünftigen Versionen ändern, während wir an einer vollständigen Lösung für die Manipulation und Internationalisierung von Zeichenfolgen für alle Plugins arbeiten. Wenn Sie an der Option Nachrichten interessiert sind, empfehlen wir Ihnen, nur die Quelle zu lesen. Der entsprechende Code befindet sich ganz unten im Autocomplete-Plugin und besteht nur aus wenigen Zeilen.

...

Wie trifft dies auf das Widget für die automatische Vervollständigung zu? Wenn Sie nun nach einem Element suchen und einen Bildschirmleser installiert haben, wird dieser wie folgt angezeigt: "1 Ergebnis ist verfügbar, verwenden Sie die Aufwärts- und Abwärtspfeiltasten, um zu navigieren." Ziemlich cool, oder?

Wenn Sie also zu Github gehen und sich den Quellcode für die automatische Vervollständigung ansehen , sehen Sie in Zeile 571, wo dies tatsächlich implementiert ist.

Das Hinzufügen der jquery css hat auch dazu beigetragen, den Anweisungstext zu entfernen.

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />

Da dies aus Gründen der Barrierefreiheit vorhanden ist, ist es wahrscheinlich am besten, es mit CSS auszublenden.

Ich würde jedoch vorschlagen:

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

Eher, als:

.ui-helper-hidden-accessible { display:none; }

Da erstere das Element außerhalb des Bildschirms verbergen, können Bildschirmleser es dennoch lesen, wohingegen display:nonedies nicht der Fall ist.

Nun, diese Frage ist etwas älter, aber der Text wird überhaupt nicht angezeigt, wenn Sie die entsprechende CSS-Datei einfügen:

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />

Natürlich müssen Sie ein aktuelles Thema einfügen, anstatt YOUR_THEME_HEREz. B. "Glätte".

Gestalten Sie es so, wie es das jQuery-Thema selbst gestaltet. Viele der anderen Antworten schlagen vor, ein ganzes Stylesheet einzuschließen. Wenn Sie jedoch nur das relevante CSS benötigen, gehen Sie folgendermaßen vor http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
}

Wenn Sie diesen Code direkt nach der automatischen Vervollständigung in Ihrem Skript hinzufügen, wird der nervige Helfer von der Seite verdrängt, aber die Benutzer von Bildschirmleseprogrammen profitieren weiterhin davon:

$(document).ready(function() { //pushing the autocomplete helper out of the visible page
    $(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});

Ich bin kein Fan von der Manipulation von CSS mit JS, aber in diesem Fall halte ich es für sinnvoll. Der JS-Code hat das Problem an erster Stelle erstellt, und das Problem wird einige Zeilen weiter unten in derselben Datei behoben. IMO ist dies besser, als das Problem in einer separaten CSS-Datei zu lösen, die möglicherweise von anderen Personen bearbeitet wird, die nicht wissen, warum die Klasse .ui-helper-hidden-access auf diese Weise geändert wurde.

Das jQuery CSS .ui-helper-hidden-access befindet sich in der Datei theme / base / core.css. Sie sollten diese Datei (mindestens) in Ihre Stylesheets aufnehmen, um die Vorwärtskompatibilität zu gewährleisten.