it-swarm.com.de

So entfernen / ändern Sie 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 Autocomplete-Beispiel mit lokaler Quelle

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

Wenn die Suche übereinstimmt, wird dieser 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?.

93
user1236048

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}
    }
});
149
TK123

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

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

Oder (siehe Daniels Kommentar unten)

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

Die Top-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 schwachsinnig! Diejenigen, die erwähnt haben, dass jQuery CSS dies für Sie verbirgt, sind richtig, und dies ist der Stil, der dies bewirkt:

.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 :).

22
Mike Campbell

Laut diesem Blog :

Wir verwenden jetzt ARIA-Live-Regionen, um anzukündigen, wann Ergebnisse verfügbar sind und wie Sie durch die Liste der Vorschläge navigieren können. Die Ankündigungen können über die Option messages konfiguriert werden, die zwei Eigenschaften aufweist: noResults für den Fall, dass keine Artikel zurückgegeben werden, und results 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 Option messages 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 Plug-ins arbeiten. Wenn Sie an der Nachrichtenoption 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? Nun, wenn Sie nach einem Objekt suchen und einen Screenreader installiert haben, werden Sie ungefähr wie folgt informiert: "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 Autocomplete Source Code ansehen, werden Sie in Zeile 571 sehen, wo dies tatsächlich implementiert ist.

17
j08691

Das Hinzufügen des 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" />
10
user2708344

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 den Gegenstand außerhalb des Bildschirms verstecken, aber trotzdem den Bildschirmlesern erlauben, ihn zu lesen, während display:none nicht.

4
Neil Sayers

Nun, diese Frage ist etwas älter, aber der Text wird überhaupt nicht angezeigt, wenn Sie die entsprechende CSS-Datei hinzufü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 anstelle von YOUR_THEME_HERE Einfügen, z. "Glätte"

2

Das Hinzufügen dieses Codes direkt nach der automatischen Vervollständigung in Ihrem Skript wird den nervigen Helfer von der Seite schieben, aber die Leute, die Screenreader verwenden, werden trotzdem davon profitieren:

$(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 CSS-Manipulationen mit JS, aber in diesem Fall halte ich es für sinnvoll. Der JS-Code hat das Problem in erster Linie verursacht, und einige Zeilen weiter unten in derselben Datei wird das Problem behoben. IMO ist dies besser als das Lösen des Problems in einer separaten CSS-Datei, die möglicherweise von anderen Personen bearbeitet wird, die nicht wissen, warum die Klasse .ui-helper-hidden-accessible auf diese Weise geändert wurde.

1
Bruno 82

Gestalten Sie es so, wie es das jQuery-Thema selbst gestaltet. In vielen anderen Antworten wird vorgeschlagen, ein vollständiges Stylesheet einzuschließen. Wenn Sie jedoch nur das relevante CSS benötigen, wird dies in 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);
}
0
dKen

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

0
paulz