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?
javascript
jquery
jquery-ui
autocomplete
user1236048
quelle
quelle
Antworten:
Ich weiß, dass dies beantwortet wurde, wollte aber nur ein Implementierungsbeispiel geben:
quelle
source: availableTags
macht? Ich habe es entfernt und hatte immer noch keine Nachrichten.availableTags
kö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 alsoCa
Cats 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.Dies wird für die Barrierefreiheit verwendet. Eine einfache Möglichkeit, es auszublenden, ist CSS:
Oder (siehe Daniels Kommentar unten)
quelle
left: -9999px
können Sie auch verwendenleft: 200%
(200% gegenüber 100%, nur um mögliche Browser-Macken zu berücksichtigen, bei denen 100% nicht ganz vom Bildschirm verschwinden).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:
Kopieren Sie das in Ihr Stylesheet, anstatt die Nachricht zu entfernen, bitte :).
quelle
clip
Eigenschaft nicht, da sie jetzt veraltet ist - siehe developer.mozilla.org/en-US/docs/Web/CSS/clipLaut diesem Blog :
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.
quelle
Das Hinzufügen der jquery css hat auch dazu beigetragen, den Anweisungstext zu entfernen.
quelle
Da dies aus Gründen der Barrierefreiheit vorhanden ist, ist es wahrscheinlich am besten, es mit CSS auszublenden.
Ich würde jedoch vorschlagen:
Eher, als:
Da erstere das Element außerhalb des Bildschirms verbergen, können Bildschirmleser es dennoch lesen, wohingegen
display:none
dies nicht der Fall ist.quelle
left: -9999px
Verwenden Sie stattdessen einfachleft: 200%
(200% gegenüber 100%, um mögliche Browser-Macken zu berücksichtigen, bei denen 100% nicht ganz vom Bildschirm verschwinden).Nun, diese Frage ist etwas älter, aber der Text wird überhaupt nicht angezeigt, wenn Sie die entsprechende CSS-Datei einfügen:
Natürlich müssen Sie ein aktuelles Thema einfügen, anstatt
YOUR_THEME_HERE
z. B. "Glätte".quelle
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
:quelle
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:
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.
quelle
left: -9999px
Verwenden Sie stattdessen einfachleft: 200%
(200% gegenüber 100%, um mögliche Browser-Macken zu berücksichtigen, bei denen 100% nicht ganz vom Bildschirm verschwinden).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.
quelle