Wie entferne/ändere ich den Hilfstext für die automatische Vervollständigung der JQuery-Benutzeroberfläche?

Lesezeit: 5 Minuten

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.

Konnte in der API-Dokumentation nichts diesbezügliches finden.

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 dieser zugehörige Hilfstext angezeigt:

‘1 Ergebnis ist verfügbar, verwenden Sie die Aufwärts- und Abwärtspfeiltasten zum Navigieren.’

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

  • in welchem ​​browser siehst du das? können Sie den gleichen Dialog auf der jquery ui-Website sehen

    – fuzionpro

    22. Oktober 2012 um 12:45 Uhr

  • Ich habe das noch nie gesehen, können Sie möglicherweise einen Fiddler oder zusätzlichen Code bereitstellen, damit wir uns das genauer ansehen können?

    – zmanc

    22. Oktober 2012 um 12:53 Uhr

  • Für mich war das Problem, dass position: relative für die Spanne überschrieben wurde, auf der die Eingabehilfen angezeigt wurden … Ich habe gerade “!important” hinzugefügt und jetzt kann ich die Eingabehilfen beibehalten

    – iKode

    15. März 2013 um 12:28 Uhr

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.'
        }
    }
});

  • Ich habe das versucht und es setzt die Zeichenfolge “null” an die gleiche Stelle. Die Lösung besteht darin, zu ändern: noResults: ”, und Sie erhalten überhaupt keine Nachricht.

    – Patrick

    11. Januar 2013 um 17:55 Uhr


  • Hat bei mir mit noResults funktioniert:”. Frage mich, warum es nicht auf api.jqueryui.com dokumentiert ist

    – Niels Steenbeek

    22. Januar 2013 um 12:59 Uhr

  • Nicht sicher was source: availableTags tut? Ich habe es entfernt und ich hatte immer noch keine Nachrichten.

    – Chuck Le Butt

    7. März 2013 um 15:49 Uhr

  • @Django Reinhardt, der gerade aus dem Beispiel in der Frage des OP kopiert wurde. Quelle definiert, woher die Autocomplete-Daten stammen. Zum Beispiel availableTags könnte eine lokale Variable sein, die ein JSON-Objekt der URL-zu-Wort-Zuordnung enthält [{ '/tag/cats': 'Cats', etc... }] Also, wenn der Benutzer tippt Ca Katzen werden in der Dropdown-Liste angezeigt und wenn sie ausgewählt oder angeklickt werden, können sie beispielsweise ein verstecktes Feld mit der URL füllen.

    Benutzer967451

    7. März 2013 um 16:08 Uhr


  • Dies ist auch 2019 noch gültig. Ich habe ein availableTags-Beispiel und ein besseres Beispiel für die Ergebnisfunktion hinzugefügt

    – 2pha

    1. Oktober 2019 um 6:28 Uhr

Benutzer-Avatar
Bertrand

Dies wird für die Zugänglichkeit verwendet, eine einfache Möglichkeit, es zu verbergen, ist mit CSS:

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

Oder (siehe Daniels Kommentar unten)

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

  • Wie Sie sagten, wird es für die Zugänglichkeit verwendet, damit Benutzer mit Bildschirmlesegeräten das Widget besser verstehen können. Bei Verwendung von display: none; Sie verstecken es auch vor Screenreadern. Besser vom Bildschirm verschieben mit Position: absolut; links:-999em;

    – Daniel Göransson

    26. Februar 2014 um 10:20 Uhr

  • Anstatt von left: -9999pxkönnen Sie auch verwenden left: 200% (200 % vs. 100 %, nur um mögliche Browser-Eigenheiten zu berücksichtigen, wo 100 % dies nicht tun ziemlich vom Bildschirm entfernen).

    – jbyrd

    16. April 2019 um 13:57 Uhr


Die Top-Antwort hier erzielt den gewünschten visuellen Effekt, vereitelt jedoch das Ziel, dass jQuery ARIA-Unterstützung hat, und ist für Benutzer, die sich darauf verlassen, ein bisschen anmaßend! Diejenigen, die erwähnt haben, dass jQuery CSS dies für Sie verbirgt, haben Recht, 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 bitte in Ihr Stylesheet, anstatt die Nachricht zu entfernen :).

  • Update 2019: Verwenden Sie nicht die clip -Eigenschaft, da sie jetzt veraltet ist – siehe developer.mozilla.org/en-US/docs/Web/CSS/clip

    – jbyrd

    16. April 2019 um 13:59 Uhr

  • Ja, das steht im Offiziellen jquery-ui/themes/base/core.css. Stellen Sie sicher, dass Sie es einschließen.

    – konyak

    17. Dezember 2020 um 17:40 Uhr

Benutzer-Avatar
j08691

Entsprechend dieses Blog:

Wir verwenden jetzt ARIA Live-Regionen, um anzukündigen, wann Ergebnisse verfügbar sind und wie man durch die Liste der Vorschläge navigiert. Die Ansagen können über die Option messages konfiguriert werden, die zwei Eigenschaften hat: noResults, wenn keine Artikel zurückgegeben werden, und results, wenn mindestens ein Artikel zurückgegeben wird. Im Allgemeinen müssten Sie diese Optionen nur ändern, wenn Sie möchten, dass die Zeichenfolge in einer anderen Sprache geschrieben wird. Die Nachrichtenoption kann sich in zukünftigen Versionen ändern, während wir an einer vollständigen Lösung für die String-Manipulation und Internationalisierung für alle Plugins arbeiten. Wenn Sie an der Nachrichtenoption interessiert sind, empfehlen wir Ihnen, einfach die Quelle zu lesen. Der relevante Code befindet sich ganz unten im Autocomplete-Plugin und umfasst nur wenige Zeilen.

Wie wirkt sich das auf das Autocomplete-Widget aus? Nun, wenn Sie jetzt nach einem Element suchen und einen Bildschirmleser installiert haben, wird er Ihnen so etwas vorlesen wie „1 Ergebnis ist verfügbar, verwenden Sie die Aufwärts- und Abwärtspfeiltasten zum Navigieren.“ Ziemlich cool, oder?

Wenn Sie also zu github gehen und sich die Quellcode automatisch vervollständigenum Zeile 571 herum sehen Sie, wo dies tatsächlich implementiert ist.

Das Hinzufügen des jquery-CSS funktionierte auch, um den Anleitungstext zu entfernen.

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

  • Achtung: Dies wird wahrscheinlich das restliche Design Ihrer Seite ruinieren.

    – TylerH

    10. Juni um 21:51 Uhr

Benutzer-Avatar
Neil Sayer

Da dies aus Gründen der Zugänglichkeit vorhanden ist, ist es wahrscheinlich am besten, es mit CSS zu verstecken.

Ich würde jedoch vorschlagen:

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

Statt:

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

Da ersteres das Element außerhalb des Bildschirms verbirgt, Bildschirmlesegeräten es jedoch trotzdem lesen kann display:none nicht.

  • Achtung: Dies wird wahrscheinlich das restliche Design Ihrer Seite ruinieren.

    – TylerH

    10. Juni um 21:51 Uhr

Benutzer-Avatar
Markus W. Mahlberg

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

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

Natürlich müssen Sie stattdessen ein aktuelles Thema einfügen YOUR_THEME_HERE zB “Glätte”

1185950cookie-checkWie entferne/ändere ich den Hilfstext für die automatische Vervollständigung der JQuery-Benutzeroberfläche?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy