Come rimuovere / modificare il testo dell'helper di completamento automatico dell'interfaccia utente di JQuery?


94

Sembra che questa sia una nuova funzionalità in JQuery UI 1.9.0, perché ho usato JQuery UI molte volte prima e questo testo non è mai apparso.

Impossibile trovare nulla di correlato nella documentazione API.

Quindi utilizzando un esempio di completamento automatico di base con sorgente locale

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

Quando la ricerca corrisponde, mostra questo testo di supporto correlato:

"1 risultato è disponibile, utilizza i tasti freccia su e giù per navigare."

Come posso disabilitarlo in modo carino, non rimuovendolo con i selettori JQuery.


1
in quale browser lo vedi? sei in grado di vedere la stessa finestra di dialogo nel sito web di jquery ui
fuzionpro

2
Non l'ho mai visto, puoi fornire un violinista o un codice aggiuntivo in modo che possiamo esaminarlo di più?
zmanc

1
per me il problema era quella posizione: parente, veniva sovrascritto per l'intervallo in cui veniva visualizzato il materiale sull'accessibilità ... Ho appena aggiunto "! important" e ora posso mantenere l'accessibilità
iKode

Il tuo dubbio mi ha fatto risparmiare tempo. Quindi +1 a te :-)
Ashok kumar

Risposte:


151

So che è stata data una risposta, ma volevo solo fornire un esempio di implementazione:

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

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

4
Ho provato questo e mette la stringa "null" nello stesso posto. La soluzione è passare a: noResults: '' e non riceverai alcun messaggio.
Patrick

2
Ha funzionato per me senza risultati: ''. Mi chiedo perché non sia documentato su api.jqueryui.com
Niels Steenbeek

Non sei sicuro di cosa source: availableTagsfa? L'ho rimosso e non avevo ancora messaggi.
Chuck Le Butt

3
@Django Reinhardt che è stato appena copiato dall'esempio nella domanda dell'OP. L'origine definisce la provenienza dei dati di completamento automatico. Ad esempio availableTagspotrebbe essere una variabile locale contenente un oggetto JSON di url alla mappatura di parole [{ '/tag/cats': 'Cats', etc... }]Quindi, quando l'utente digita CaCats verrà visualizzato nel menu a discesa e quando viene selezionato o cliccato può popolare un campo nascosto con l'URL, ad esempio.
TK123

1
Molte grazie. Impossibile trovare questo nella documentazione API.
Chorinator

86

Questo è usato per l'accessibilità, un modo semplice per nasconderlo è con CSS:

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

Oppure (vedi il commento di Daniel sotto)

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

5
Come hai detto, è utilizzato per l'accessibilità in modo che le persone con lettori di schermo possano capire meglio il widget. Utilizzando display: nessuno; lo nascondi anche agli screen reader. Meglio spostarlo di schermo con posizione: assoluto; sinistra: -999em;
Daniel Göransson

Invece di left: -9999px, è anche possibile utilizzare left: 200%(200% contro il 100% solo per tenere conto di eventuali peculiarità del browser dove il 100% non abbastanza farlo fuori lo schermo).
jbyrd

23

La risposta migliore qui ottiene l'effetto visivo desiderato, ma sconfigge l'oggetto di jQuery che ha il supporto ARIA ed è un po 'ostico per gli utenti che fanno affidamento su di esso! Coloro che hanno detto che jQuery CSS lo nasconde per te hanno ragione, e questo è lo stile che lo fa:

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

Copialo nel tuo foglio di stile invece di rimuovere il messaggio, per favore :).


1
Aggiornamento 2019: non utilizzare la clipproprietà, poiché ora è deprecata - vedere developer.mozilla.org/en-US/docs/Web/CSS/clip
jbyrd

17

Secondo questo blog :

Ora utilizziamo le regioni live di ARIA per annunciare quando i risultati saranno disponibili e come navigare nell'elenco dei suggerimenti. Gli annunci possono essere configurati tramite l'opzione messages, che ha due proprietà: noResults per quando non viene restituito alcun elemento e risultati per quando viene restituito almeno un elemento. In generale, è necessario modificare queste opzioni solo se si desidera che la stringa venga scritta in una lingua diversa. L'opzione dei messaggi è soggetta a modifiche nelle versioni future mentre lavoriamo su una soluzione completa per la manipolazione delle stringhe e l'internazionalizzazione in tutti i plugin. Se sei interessato all'opzione messaggi, ti invitiamo a leggere solo la fonte; il codice pertinente si trova in fondo al plug-in di completamento automatico ed è composto da poche righe.

...

Quindi come si applica al widget di completamento automatico? Bene, ora quando cerchi un elemento, se hai uno screen reader installato ti leggerà qualcosa come "1 risultato è disponibile, usa i tasti freccia su e giù per navigare". Piuttosto carino, eh?

Quindi se vai su GitHub e guardi il codice sorgente del completamento automatico , intorno alla riga 571 vedrai dove è effettivamente implementato.


11

L'aggiunta del css jquery ha anche funzionato per rimuovere il testo dell'istruzione.

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

Ha funzionato anche per me.
Indika K

4

Dato che è presente per motivi di accessibilità, è probabilmente meglio nasconderlo con CSS.

Tuttavia, suggerirei:

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

Piuttosto che:

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

Poiché il primo nasconderà l'elemento fuori dallo schermo, ma consentirà comunque ai lettori di schermo di leggerlo, mentre display:nonenon lo fa.


Invece di left: -9999px, proprio uso left: 200%(200% contro il 100% solo per tenere conto di eventuali peculiarità del browser dove il 100% non abbastanza farlo fuori lo schermo).
jbyrd

2

Bene, questa domanda è un po 'più vecchia, ma il testo non viene visualizzato affatto quando includi il file css corrispondente:

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

Ovviamente devi inserire un tema reale invece di, YOUR_THEME_HEREad esempio, "levigatezza"


1

Modellalo come il tema jQuery stesso lo definisce. Molte altre risposte suggeriscono di includere un intero foglio di stile, ma se vuoi solo il CSS pertinente, ecco come è fatto 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);
}

1

L'aggiunta di questo codice subito dopo il completamento automatico nel tuo script spingerà il fastidioso aiutante fuori dalla pagina, ma le persone che usano gli screen reader ne trarranno comunque vantaggio:

$(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
});

Non sono un fan della manipolazione dei CSS con JS ma in questo caso penso che abbia senso. Il codice JS ha creato il problema in primo luogo e il problema verrà risolto poche righe sotto nello stesso file. IMO questo è meglio che risolvere il problema in un file CSS separato che potrebbe essere modificato da altre persone che non sanno perché la classe .ui-helper-hidden-access è stata modificata in questo modo.


1
Ho cercato per sempre di risolvere questo problema e la tua soluzione ha funzionato.
Timothy G.

Invece di left: -9999px, proprio uso left: 200%(200% contro il 100% solo per tenere conto di eventuali peculiarità del browser dove il 100% non abbastanza farlo fuori lo schermo).
jbyrd

0

Il jQuery CSS .ui-helper-hidden-access si trova nel file themes / base / core.css. Dovresti includere questo file (come minimo) nei tuoi fogli di stile per compatibilità futura.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.