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

94

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?

user1236048
quelle
1
In welchem ​​Browser sehen Sie das? können Sie den gleichen Dialog in jquery ui Website sehen
fuzionpro
2
Ich habe das noch nie gesehen. Können Sie möglicherweise einen Geiger oder einen zusätzlichen Code bereitstellen, damit wir uns näher damit befassen können?
Zmanc
1
Für mich war das Problem diese Position: relativ, wurde für die Zeitspanne überschrieben, in der das
Eingabehilfen angezeigt
Ihr Zweifel hat mir Zeit gespart. Daher +1 an Sie :-)
Ashok Kumar

Antworten:

151

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.'
        }
    }
});
TK123
quelle
4
Ich habe es versucht und es setzt die Zeichenfolge "null" an die gleiche Stelle. Die Lösung besteht darin, zu: noResults: '' zu wechseln, und Sie erhalten überhaupt keine Nachricht.
Patrick
2
Arbeitete für mich mit noResults: ''. Ich frage mich, warum es nicht auf api.jqueryui.com dokumentiert ist
Niels Steenbeek
Nicht sicher, was source: availableTagsmacht? Ich habe es entfernt und hatte immer noch keine Nachrichten.
Chuck Le Butt
3
@ Django Reinhardt, der gerade aus dem Beispiel in der OP-Frage kopiert wurde. Die Quelle definiert, woher die Daten für die automatische Vervollständigung stammen. Zum Beispiel availableTagskönnte es sich um eine lokale Variable handeln, die ein JSON-Objekt für die Zuordnung von URL zu Wort enthält. [{ '/tag/cats': 'Cats', etc... }]Wenn der Benutzer also CaCats eingibt, wird Cats in der Dropdown-Liste angezeigt, und wenn er ausgewählt oder angeklickt wird, kann er beispielsweise ein verstecktes Feld mit der URL füllen.
TK123
1
Vielen Dank. Dies konnte in der API-Dokumentation nicht gefunden werden.
Chorinator
86

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; }
Bertrand
quelle
5
Wie Sie sagten, wird es für die Barrierefreiheit verwendet, damit Benutzer mit Bildschirmleseprogrammen das Widget besser verstehen können. Bei Verwendung der Anzeige: keine; Sie verstecken es auch vor Bildschirmlesern. Verschieben Sie den Bildschirm besser mit der Position: absolut; links: -999em;
Daniel Göransson
Stattdessen left: -9999pxkönnen Sie auch verwenden left: 200%(200% gegenüber 100%, nur um mögliche Browser-Macken zu berücksichtigen, bei denen 100% nicht ganz vom Bildschirm verschwinden).
16.
23

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

Mike Campbell
quelle
1
Update 2019: Verwenden Sie die clipEigenschaft nicht, da sie jetzt veraltet ist - siehe developer.mozilla.org/en-US/docs/Web/CSS/clip
jbyrd
17

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.

j08691
quelle
10

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" />
user2708344
quelle
Hat auch für mich gearbeitet.
Indika K
4

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.

Neil Sayers
quelle
left: -9999pxVerwenden Sie stattdessen einfach left: 200%(200% gegenüber 100%, um mögliche Browser-Macken zu berücksichtigen, bei denen 100% nicht ganz vom Bildschirm verschwinden).
16.
2

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".

Markus W Mahlberg
quelle
1

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);
}
dKen
quelle
1

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.

Bruno 82
quelle
1
Ich habe immer versucht, dieses Problem zu lösen, und Ihre Lösung hat funktioniert.
Timothy G.
left: -9999pxVerwenden Sie stattdessen einfach left: 200%(200% gegenüber 100%, um mögliche Browser-Macken zu berücksichtigen, bei denen 100% nicht ganz vom Bildschirm verschwinden).
16.
0

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.

paulz
quelle